在UI网格“全选”复选框中,选中后,选择当前页面中可见的所有记录以及其他页面。
问题 - 我们可以选择仅在当前页面中显示的行的方式。
plunker http://plnkr.co/edit/gHiER0A2Oaia4HMWChcG?p=preview
尝试了api $scope.gridApi.selection.selectAllVisibleRows();
但它没有选择当前页面中显示的行。如果单击“选择可见行”按钮并移至下一页,则还会选择其中的记录。
api selectAllVisibleRows
的其他细节
在ui-grid函数中选中selectAllVisibleRows。 row.visible
为true
返回all the rows across all pages
。
selectAllVisibleRows: function (evt) {
if (grid.options.multiSelect === false) {
return;
}
var changedRows = [];
grid.rows.forEach(function (row) {
if (row.visible) {
if (!row.isSelected && row.enableSelection !== false){
row.setSelected(true);
service.decideRaiseSelectionEvent( grid, row, changedRows, evt );
}
} else {
if (row.isSelected){
row.setSelected(false);
service.decideRaiseSelectionEvent( grid, row, changedRows, evt );
}
}});
service.decideRaiseSelectionBatchEvent( grid, changedRows, evt );
grid.selection.selectAll = true;
},
尝试使用for循环这里是plunker link!
要仅选择当前网格页面中的行,必须在注册其API时为ui-grid v4.4.9 rowSelectionChangedBatch事件添加处理程序。方法。正如您所指出的,它会将未过滤的所有行视为可见。它不排除未在当前网格页面上呈现的行。因此,我们被迫将事情掌握在自己手中:
onRegisterApi: function (gridApi) {
gridApi.selection.on.rowSelectionChangedBatch(null, function (rows) {
var grid = this.grid;
// you'll need ui-grid v4.4.9 or better
// otherwise you'll need to invert getSelectAllState()
// as explained at https://github.com/angular-ui/ui-grid/issues/5411
var isAllSelected = grid.api.selection.getSelectAllState();
// when select all is checked, the default behavior is to select all grid rows on all pages
// so we have to deselect them all first before we select just the ones on the visible page
grid.api.selection.clearSelectedRows(null);
if (isAllSelected) {
// select only the rows displayed in the current grid page
var startIndex = (grid.options.paginationCurrentPage - 1) * grid.options.paginationPageSize;
var endIndex = startIndex + grid.options.paginationPageSize;
for (let i = startIndex; i < endIndex; i++) {
let row = grid.rows[i];
row.isSelected = true;
}
}
});
},