Angular UI-Grid: как получить общее количество элементов после фильтрации

Я использую UI Grid для отображения некоторых данных. Один из столбцов является текстовым, поэтому у меня есть фильтрация «содержит», которая работает отлично.

Я также использую пагинацию. В правом углу UI-Grid показано что-то вроде:

1 - 23 of 23 items

В моей функциональности страницы (сторона углового контроллера) мне нужно вернуть общее количество элементов, в частности, последние «23» из этой строки. Я не мог найти ничего в документации, кроме этого (из документов):

GridOptions (API в модуле ui.grid.pagination)

totalItems Общее количество элементов, устанавливаемое автоматически при разбивке на страницы на стороне клиента, необходимо установить пользователем для разбивки на страницы на стороне сервера"

Поэтому я попытался использовать $scope.gridOptions.totalItems, но, к сожалению, он всегда возвращает 0 при первой загрузке страницы.

Мой обходной путь заключался в использовании data.length, который дал бы мне то, что мне было нужно. Однако после дальнейшего тестирования я понял, что после использования фильтрации общее количество элементов в нижнем колонтитуле разбиения на страницы изменяется на сумму совпадающих результатов. Я не нашел другого способа получить этот номер.

Еще одна вещь: есть ли событие, которое срабатывает после завершения фильтрации, чтобы я мог проверить $scope.gridOptions.totalItems тогда?

Любые идеи? Заранее спасибо :)


angularjs visible angular-ui-grid
person Dimitrios Matanis    schedule 05.02.2015    source источник

Ответы (5)


arrow_upward
11
arrow_downward

Вам следует избегать jQuery (как предлагает другой пост) и вместо этого взаимодействовать с API.

Сначала вам нужно сохранить ссылку на API в событии создания сетки.

$scope.gridOptions = {
    ....
    onRegisterApi: registerGridApi,
    ....
};
function registerGridApi(gridApi) {
    $scope.gridApi = gridApi;
}

Вы уже должны знать общее количество строк.

Вы можете получить количество видимых/отфильтрованных строк с помощью:

gridApi.core.getVisibleRows().length

or

gridApi.grid.getVisibleRows().length

Вы можете получить количество выбранных строк с помощью:

gridApi.selection.getSelectedRows().length
person user1464581    schedule 05.01.2016

arrow_upward
1
arrow_downward 

$scope.gridOptions = {
    ....
    onRegisterApi: registerGridApi,
    ....
};

function registerGridApi(gridApi) {
            $scope.gridApi = gridApi;
}

Получите общее количество предметов:

var totalItems = $scope.gridApi.grid.options.totalItems;
person thangcao    schedule 23.04.2015

arrow_upward
1
arrow_downward

Вы можете использовать этот обходной путь.

var RowsVisible = $(".ui-grid-row").length;

Если есть группировка, используйте этот var RowsVisible = $(".ui-grid-row").length/2;

Это даст вам, сколько строк присутствует. Если есть группировка, то она даст вам количество заголовков и видимых строк.

person Shinoy Babu    schedule 20.10.2015

arrow_upward
1
arrow_downward

getVisibleRows() вернет количество видимых строк. В случае, если вы расширите группировку, размер getVisibleRows() соответственно увеличится.

  $scope.gridApi.core.getVisibleRows().length;

Поэтому описанный выше подход имеет некоторые ограничения.

Вы также можете получить общее количество сгруппированных строк, используя следующий подход.

 var totalGroupedRows = Object.keys($scope.gridApi.grid.grouping.groupingHeaderCache).length ;

Примечание Object.keys() не будет работать IE‹9.

person Shivek Parmar    schedule 09.02.2016

arrow_upward
0
arrow_downward

В нашем приложении мы показываем некоторые столбцы в нижнем колонтитуле. Он не работал с фильтром колонки. Затем мы сделали следующие шаги, после чего это сработало.

i.$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
}
ii. calling below template in the footer
footerCellTemplate: '<div class="footer-class" style="text-align:right;margin-right: 5px;" >{{grid.appScope.getTotalofcolumn(grid) | currency:number:0}}</div>',
iii. inside getTotalofcolumn used below line for rows                       
$scope.gridApi.core.getVisibleRows();

$scope.totalValues =$scope.gridApi.core.getVisibleRows();
                    $scope.Total = 0
                    angular.forEach($scope.totalValues,function(value,key){
                        $scope.Total +=  value.entity.TotalCOLUMNVALUE/NAME;
                    }); 
                    return $scope.Total;
person Sahitya M    schedule 08.10.2020