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