UI-Grid -如何使用selectAll复选框选择显示在当前页面中的记录

UI-Grid - How to select records displayed in the current page using selectAll checkbox

本文关键字：当前页 记录 显示 选择 何使用 selectAll 复选框 UI-Grid      更新时间：2023-09-26

在UI-grid "select All"复选框中，勾选后，将选择当前页面以及其他页面中可见的所有记录。

问题 -我们如何选择仅在当前页面中显示的行

砰砰作响http://plnkr.co/edit/gHiER0A2Oaia4HMWChcG?p=preview

尝试api $scope.gridApi.selection.selectAllVisibleRows();，但它不选择仅显示在当前页面中的行。如果你点击"选择可见行"按钮并移动到下一页，那里的记录也被选中了。

api的其他详细信息selectAllVisibleRows

当在ui-grid函数中选中时，选择ectallvisiblerows。对于all the rows across all pages, row.visible返回true。


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 loop这是活塞链接!

要选择当前网格页面中的行，必须在注册其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;
                    }
                }
            });
        },

onRegisterApi: function(gridApi) {
    gridApi.selection.on.rowSelectionChangedBatch($scope, function() {
        // check for ui-grid version to revert opposite value
        var isAllSelected = gridApi.selection.getSelectAllState();
        if (isAllSelected) { 
            // unselect all rows as select all button selects all rows by default
            gridApi.selection.clearSelectedRows();
            /* Will fetch only grid rows visible on page. It will fetch the correct 
               rows even if you have applied sorting, pagination and filters. */
            var gridRows = this.grid.getVisibleRows();

            // function to set Selected to only visible rows
            angular.forEach(gridRows, function(gridRow) { 
                gridRow.setSelected(true);
            });
        }
        $scope.selectedRows = gridApi.selection.getSelectedRows();
   });
}
相关文章：