Angularjs ui网格选择全部以将范围限制到当前页面_Angularjs_Angular Ui Grid

Angularjs ui网格选择全部以将范围限制到当前页面

angularjs

Angularjs ui网格选择全部以将范围限制到当前页面,angularjs,angular-ui-grid,Angularjs,Angular Ui Grid,我正在寻找关于如何继续的建议，并想看看是否有人实施了类似的要求。请就可能的方法提供一些建议。我有一个有角度的ui网格，它被稍微修改一下，用复选框替换OK按钮。单击“全选”可以很好地选择UI网格中的所有行。但我希望在分页中将选择范围限定到当前页面。从一页移动到另一页时，所选内容应保留。用户选择第1页“全选复选框”。然后转到第2页，可能会选择“全选复选框”。此时，应同时选择第1页和第2页。所选页面可能多于2个，但只应选择选中“全选”的页面感谢您花时间阅读并提供建议这是一个带有分页和复选

我正在寻找关于如何继续的建议，并想看看是否有人实施了类似的要求。请就可能的方法提供一些建议。我有一个有角度的ui网格，它被稍微修改一下，用复选框替换OK按钮。单击“全选”可以很好地选择UI网格中的所有行。但我希望在分页中将选择范围限定到当前页面。从一页移动到另一页时，所选内容应保留。
用户选择第1页“全选复选框”。然后转到第2页，可能会选择“全选复选框”。此时，应同时选择第1页和第2页。所选页面可能多于2个，但只应选择选中“全选”的页面

感谢您花时间阅读并提供建议

这是一个带有分页和复选框的Plunker链接

    [http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview][1]

非常感谢

选择可见行并限制选择：

要检测页面上所有行的选择，请执行以下操作：

gridOptions

中的

enableSelectionBatchEvent

应设置为true

$scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;

     // detect bulk selection
      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
               //logic to save the selected visible rows.

      });

ui.grid.selection

public api提供了一个名为

selectAllVisibleRows（事件）

的方法，该方法仅选择可见行

一旦此选择范围受到限制，您就可以使用UI grid提供的

saveState

功能

gridOptions

提供名为

saveSelection

的属性，该属性保存当前选定的行并默认为true

导航到第2页后，应按如下方式保存数据-

保存数据：

 $scope.state = {};
 $scope.state = $scope.gridApi.saveState.save();

$scope.gridApi.saveState.restore( $scope, $scope.state );

在加载第2页时，您应恢复如下数据-

恢复保存的数据：

 $scope.state = {};
 $scope.state = $scope.gridApi.saveState.save();

$scope.gridApi.saveState.restore( $scope, $scope.state );

请按照以下教程了解详细信息：

选择可见行并限制选择：

要检测页面上所有行的选择，请执行以下操作：

gridOptions

中的

enableSelectionBatchEvent

应设置为true

$scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;

     // detect bulk selection
      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
               //logic to save the selected visible rows.

      });

ui.grid.selection

public api提供了一个名为

selectAllVisibleRows（事件）

的方法，该方法仅选择可见行

一旦此选择范围受到限制，您就可以使用UI grid提供的

saveState

功能

gridOptions

提供名为

saveSelection

的属性，该属性保存当前选定的行并默认为true

导航到第2页后，应按如下方式保存数据-

保存数据：

 $scope.state = {};
 $scope.state = $scope.gridApi.saveState.save();

$scope.gridApi.saveState.restore( $scope, $scope.state );

在加载第2页时，您应恢复如下数据-

恢复保存的数据：

 $scope.state = {};
 $scope.state = $scope.gridApi.saveState.save();

$scope.gridApi.saveState.restore( $scope, $scope.state );

请按照以下教程了解详细信息：

是的，ui grid v4.4.9 API有一个selectAllVisibleRows（事件）方法。不幸的是，它认为所有未过滤的行都是可见的。它不排除当前网格页上未呈现的行。因此，我们不得不自己处理问题：

        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:函数（gridApi）{ gridApi.selection.on.rowSelectionChangedBatch（空，函数（行）{ var grid=this.grid； //您将需要ui grid v4.4.9或更高版本 //否则，您将需要反转getSelectAllState（） //正如在https://github.com/angular-ui/ui-grid/issues/5411 var isAllSelected=grid.api.selection.getSelectAllState（）； //选中“全选”时，默认行为是选择所有页面上的所有网格行 //因此，我们必须先取消选择所有选项，然后再选择可见页面上的选项 grid.api.selection.clearSelectedRows（null）；如果（全部选中）{ //仅选择当前网格页面中显示的行 var startIndex=（grid.options.paginationCurrentPage-1）*grid.options.paginationPageSize； var endIndex=startIndex+grid.options.paginationPageSize； for（设i=startIndex；i是的，ui grid v4.4.9 API有一个selectAllVisibleRows（事件）方法。不幸的是，它认为所有未过滤的行都是可见的。它不排除当前网格页上未呈现的行。因此，我们不得不自己处理问题：

        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;
                    }
                }
            });
        },