在 angular UI Grid 中使用外部分页和行选择

Question

我正在处理 AngularJS UI 网格，当我使用 useExternalPagination 时，useExternalSorting 属性为真，Rowselection 不起作用。下面是我的网格属性

    $scope.gridOption = {
        'excessRows': 20, 
        enableSorting: true,
        enableRowSelection: true,
        enableRowHeaderSelection: true,
        multiSelect: true,
        enablePaginationControls: false,
        paginationPageSizes: [10,20],
        paginationPageSize: 10,
        rowHeight: 160, 
        minRowsToShow: 6,
        useExternalPagination: true,
        useExternalSorting: true,
        rowTemplate: 'temp.html'
    };

我在 onRegisterApi 中的外部分页，

$scope.gridOption.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
    gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {
                    pagination.pageNumber = newPage;
                    pagination.pageSize = pageSize;
                    setData();
    });
};

   function setData() {
    http.get().then(function(data) {
    $scope.gridOption.totalItems = data.total;
    $scope.gridOption.data =  data.grid;
            $timeout(function() {
              $scope.gridApi.selection.selectRow($scope.gridOption.data[0]);
            },1000);
        }

如您所见，我正在选择网格中的第一个数据。 $scope.gridApi.selection.selectRow($scope.gridOption.data[0]);但这不是选择第一行。

如果我删除属性 useExternalPagination，useExternalSorting selectRow 正在选择指定的行。我需要使用 externalpagination 和 rowselection 选项。我是否遗漏了代码中的任何内容？

伸出援手....

提前致谢！！！

Answer 1

我创建了一个带有 useExternalPagination、useExternalSorting 和 enableRowSelection 功能的示例 pluncker。

http://plnkr.co/edit/I67c3xTkBeXq5OnMkIad?p=preview

清单：1) 确保您使用的是最新版本的 ui-grid(3.0.7)。
2）检查是否添加了所有required依赖

HTML:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination class="grid"></div>

JS:

  $scope.gridOptions = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    enableRowSelection: true,
    enableSelectAll: true
 };

在 angular UI Grid 中使用外部分页和行选择

useExternalPagination and rowselection in angular UIGrid

angularjs

angular-ui

angular-ui-grid

angular-ui-select