Question

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

从版本开始，我在Angular 1.2.17，angular-grid（ng-grid）2.0.11上，并且有Jquery 2.1（比ng-grid使用的默认依赖版本更早）。

问题1：分页是服务器端还是客户端？换句话说，API调用是期望从服务器中删除每个结果集行，然后在UI中对其进行分页，或者它是否真的可以使用say query params limit = x＆amp; offset = y进行服务器端分页。

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

下面我的UI代码工作正常，$ scope.getPagedDataAsync被调用，进入服务器并下拉定义的限制和偏移量。

假设我在服务器上有50条记录。我要求limit = 10＆amp; 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认为是服务器总项目的内容。并将其设置为传入方法＆＃34; setPagingData＆＃34;的数据大小：

$scope.totalServerItems = data.length;

但是方法＆＃34; getPagedDataAsync＆＃34;为了得到＆＃34;数据的价值＆＃34;：

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

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

Answer 1

正如我在ng-grid文档中看到的那样，它仅用于模拟服务器调用。网格确实与服务器端分页一起工作，但服务器应该做出适当的响应，我认为你已经处理过了。您没有包含您的setPagingData方法，但如果它类似于您可能已经混合使用serveride和clientside分页的文档。

我们有这样的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

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

1 个答案: