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

Question

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

从Versions开始,我在Angular 1.2.17,angular-grid(ng-grid)2.0.11上,并且有Jquery 2.1(比ng-grid使用的默认依赖版本更早).

问题1:分页是服务器端还是客户端？换句话说,API调用是期望从服务器中删除每个结果集行,然后在UI中对其进行分页,或者它是否真的可以使用say query params 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选项都无法正常工作.如果从页面大小50开始然后减少它就可以了.但是,如果我从pagesize 10返回到pagesize 50,则无法使用额外的行更新表内容.

真的,只是对预期行为的一些简单解释将非常感激.这样我就可以实际报告未按预期执行的操作.

我可能应该重新迭代,我相信我可以很好地阅读代码以获得入门示例.看起来:

$scope.totalServerItems

是什么控制ng-grid认为是服务器总项目.并将其设置为传递到方法"setPagingData"的数据的大小:

$scope.totalServerItems = data.length;

但是在方法"getPagedDataAsync"中为了"数据"的值:

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 包含项目总数，并且它会从响应标头填充到成功回调中。

华泰