角度 ng-grid 分页的预期行为是什么？

Question

AngularJS 是一个优秀的框架，ng-grid 非常适合快速获得丰富的表格功能。但是，由于缺乏任何文档，我真正难以理解的 ng-grid 的一部分是 ng-grid 分页的预期行为。我可以阅读 ng-grid 入门网站上提供的代码和示例。但我无法理解它不能正常工作的事实是否是我自己的用户错误，或者我正在使用的 Angular 版本是否破坏了 ng-grid 行为。

从版本开始，我使用的是 Angular 1.2.17、angular-grid (ng-grid) 2.0.11，并且拥有 Jquery 2.1（它领先于 ng-grid 使用的默认依赖版本）。

问题1：分页真的是Server端还是Client端？换句话说，API 调用是否预期会从服务器中删除每个结果集行，然后在 UI 中对其进行分页，或者它是否真的可以通过查询参数 limit=x&offset=y 进行服务器端分页。

问题 2：如果 ng-grid 没有预先拉下整个结果集 - 当分页使用离散限制和偏移量时，ng-grid 如何知道项目总数？

下面是我的 UI 代码，它运行良好，$scope.getPagedDataAsync 被调用，进入服务器并仅拉下定义的限制和偏移量。

假设我在服务器上有 50 条记录。我要求 limit=10&offset=10 - 这会给我来自服务器等的记录 11-20。

 $scope.getPagedDataAsync = function (pageSize, page, searchText) {
                setTimeout(function () {
                    var data, limit = pageSize, offset = ((page * pageSize) - pageSize);
                    if (searchText) {
                        var ft = searchText.toLowerCase();
                        DfmAdminAgency.query(function (largeLoad) {
                            data = largeLoad.filter(function (item) {
                                return JSON.stringify(item).toLowerCase().indexOf(ft) !== -1;
                            });
                            $scope.setPagingData(data, page, pageSize);
                        });
                    } else {

                        DfmAdminAgency.query({limit: pageSize, offset: offset}, function (largeLoad) {
                            $scope.setPagingData(largeLoad, page, pageSize);
                        });
                    }
                }, 100);
            };

无论我是否引入限制和偏移，pagesize 选项都无法正常工作。如果从 pagesize 50 开始然后减小它是可以的。但是，如果我从 pagesize 10 返回到 pagesize 50，它将无法使用额外的行更新表格内容。

真的，如果只是对预期行为的一些简单解释，将不胜感激。这样，我实际上可以报告未按预期执行的操作。

我可能应该重新迭代，我确实相信我可以很好地阅读代码以用于入门示例。看来：

$scope.totalServerItems

控制 ng-grid 认为的服务器项目总数。这被设置为传递给方法“setPagingData”的数据的大小：

$scope.totalServerItems = data.length;

但是在“getPagedDataAsync”方法中为了获取“data”的值：

DfmAdminAgency.query(function (largeLoad) {
                    $scope.setPagingData(largeLoad, page, pageSize);
                });

在 ng-grid 上的页面之间进行分页时会调用上述内容。换句话说，每次单击分页时，它都会向服务器查询完整的结果集......这实际上表明，它正在从服务器获取整个结果集，然后只是进行准本地分页.当然这不是预期的行为？！还是数据服务提供商有责任保留有关完整数据大小的信息，以及提供给 ng-grid 表的缓存数据等是否为相同的数据召回服务器是不合适的？

Answer 1

正如我在 ng-grid 文档中看到的示例，它只是为了模拟服务器调用。网格确实适用于服务器端分页，但我假设您已经处理了由服务器做出适当响应的响应。您没有包含您的 setPagingData 方法，但如果它与文档类似，您可能已经混合了服务器端和客户端分页。

我们有一个这样的 getData 方法（省略错误处理）：

function getData() {
    $resource(urlService.getBaseUrl() + $scope.restUrl + ':id').query({
        page: $scope.pagingOptions.currentPage,
        pageSize: $scope.pagingOptions.pageSize
    }, function (responseItems, getResponseHeaders) {
        var xPageObject = getResponseHeaders('x-pagination');
        xPageObject = angular.fromJson(xPageObject);
        if (xPageObject) {
            $scope.totalPages = xPageObject.TotalPages;
            $scope.totalItems = xPageObject.TotalCount;
        } else {
            console.log("No paging header found");
        }
    $scope.items = responseItems;
    });
}

我们的服务器方法然后适当地分页。为了确保我们在分页选项更改时进行更新，请在分页选项上添加一个监视：

// Listen on changes to currentPage and reload when updated
$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        if (newVal.pageSize !== oldVal.pageSize) {
             newVal.currentPage = 1;
        }
        getData();
        }
}, true);

这将确保对分页所做的任何更改都会导致新的请求。

关于您的 totalServerItems 问题，它在选项中定义网格将使用哪个范围变量：

$scope.options = {
        columnDefs: 'columnDefinitions',
        data: 'items',
        totalServerItems: 'totalItems'
 };

在我的例子中，$scope.totalItems 包含项目的总数，它会在响应标头的成功回调中填充。

HTH