ui-grid enableSelectAll 和 paginationPageSize
ui-grid enableSelectAll and paginationPageSize
我有一个网格,我希望分页大小为 10,我想 select 所有选项将行 selection 限制为仅 10,但鉴于此配置,它 selects 所有页面的整个数据集。
$scope.gridEvents = {
enableSorting : true,
enableSelectAll: true,
enableColumnResize: true,
enablePaginationControls: false,
rowHeight: 27,
enableScrollbars : true,
paginationPageSize : 10
}
感谢任何帮助
请尝试如下图
工作Plunker
JS
$scope.gridOptions = {
paginationPageSizes: [10, 20, 30],
paginationPageSize: 10,
useExternalPagination: true,
enableRowSelection: true,
enableSelectAll: true,
totalItems: 100,
columnDefs: [
{ name: 'name' },
{ name: 'gender' },
{ name: 'company' }
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
$scope.getPage(currentPage, pageSize);
});
}
};
$scope.getPage = function(pageNumber, pageSize){
var startingRow = pageSize * ( pageNumber - 1); // page number starts at 1, not zero
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
var newData = [];
for( var i = startingRow; i < startingRow + $scope.gridOptions.paginationPageSize; i++ ) {
newData.push( data[i] );
}
$scope.gridOptions.data = newData;
});
};
$scope.getPage(1, 10);
Html
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div>
我有一个网格,我希望分页大小为 10,我想 select 所有选项将行 selection 限制为仅 10,但鉴于此配置,它 selects 所有页面的整个数据集。
$scope.gridEvents = {
enableSorting : true,
enableSelectAll: true,
enableColumnResize: true,
enablePaginationControls: false,
rowHeight: 27,
enableScrollbars : true,
paginationPageSize : 10
}
感谢任何帮助
请尝试如下图
工作Plunker
JS
$scope.gridOptions = {
paginationPageSizes: [10, 20, 30],
paginationPageSize: 10,
useExternalPagination: true,
enableRowSelection: true,
enableSelectAll: true,
totalItems: 100,
columnDefs: [
{ name: 'name' },
{ name: 'gender' },
{ name: 'company' }
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
$scope.getPage(currentPage, pageSize);
});
}
};
$scope.getPage = function(pageNumber, pageSize){
var startingRow = pageSize * ( pageNumber - 1); // page number starts at 1, not zero
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
var newData = [];
for( var i = startingRow; i < startingRow + $scope.gridOptions.paginationPageSize; i++ ) {
newData.push( data[i] );
}
$scope.gridOptions.data = newData;
});
};
$scope.getPage(1, 10);
Html
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div>