如何在 paginationPageSizes select 框中添加 "ALL" 作为标签和 totalItems 作为值，就像使用 angularjs 在 UI-grid 中添加 [25, 50, 75]

Question

我想添加一个类似 ALL 的选项，它将使用 angularjs 在 UI- 网格中显示所有记录，如下所示

paginationPageSizes: [
  {label: "10", value: "10"},
  {label: "25", value: "25"},
  {label: "All", value: $scope.gridOptions.totalItems}]

Answer 1

你可以调整他们的optionsdropdown但它不是很流畅。我创建了一个 Plunkr 展示可能的解决方案。

首先，您按照之前的方式修改 paginationPageSizes 对象

paginationPageSizes: [
  {label: '25', value: 25},
  {label: '50', value: 50},
],

要添加您的 ALL，您可以在获取数据后推送该值。

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
  $scope.gridOptions1.data = data;
  $scope.gridOptions1.paginationPageSizes.push({label: 'ALL', value: $scope.gridOptions1.data.length});
});

棘手的部分来了！

您必须修改选项模板以匹配新的 paginationPageSizes 对象。

$templateCache.put('ui-grid/pagination',
  "<div class=\"ui-grid-pager-panel\" ui-grid-pager ng-show=\"grid.options.enablePaginationControls\"><div class=\"ui-grid-pager-container\"><div class=\"ui-grid-pager-control\"><button type=\"button\" ng-click=\"paginationApi.seek(1)\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle\"><div class=\"first-bar\"></div></div></button> <button type=\"button\" ng-click=\"paginationApi.previousPage()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle prev-triangle\"></div></button> <input type=\"number\" ng-model=\"grid.options.paginationCurrentPage\" min=\"1\" max=\"{{ paginationApi.getTotalPages() }}\" required> <span class=\"ui-grid-pager-max-pages-number\" ng-show=\"paginationApi.getTotalPages() > 0\">/ {{ paginationApi.getTotalPages() }}</span> <button type=\"button\" ng-click=\"paginationApi.nextPage()\" ng-disabled=\"cantPageForward()\"><div class=\"last-triangle next-triangle\"></div></button> <button type=\"button\" ng-click=\"paginationApi.seek(paginationApi.getTotalPages())\" ng-disabled=\"cantPageToLast()\"><div class=\"last-triangle\"><div class=\"last-bar\"></div></div></button></div><div class=\"ui-grid-pager-row-count-picker\">"+

  "<select ng-model=\"grid.options.paginationPageSize\""+

  //"ng-init=\"grid.options.paginationPageSize = grid.options.paginationPageSizes[0]\" " +

  "ng-options=\"o.value as o.label for o in grid.options.paginationPageSizes track by o.label\">"+

  "</select><span class=\"ui-grid-pager-row-count-label\">&nbsp;{{sizesLabel}}</span></div></div><div class=\"ui-grid-pager-count-container\"><div class=\"ui-grid-pager-count\"><span ng-show=\"grid.options.totalItems > 0\">{{showingLow}} - {{showingHigh}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}</span></div></div></div>"
);

参见第 4 行，我在其中添加了新的解析逻辑。

现在关于这个不容易解决的问题。正如您在 Plunkr 中看到的那样，您没有这种方式的默认选择，因为您得到的是一个对象而不是普通值。

ng-init 块显示了可以对此做些什么，但您需要深入挖掘他们的源代码，因为 paginationPageSize 在他们的代码中用作普通数字，而我们现在有一个对象。

更新：我尝试了一些设置并且确实有效。使用不带跟踪的选项会有所不同。参见 updated Plunkr。

"ng-init=\"grid.options.paginationPageSize = grid.options.paginationPageSizes[0].value\" " +

"ng-options=\"o.value as o.label for o in grid.options.paginationPageSizes\">"+

如何在 paginationPageSizes select 框中添加 "ALL" 作为标签和 totalItems 作为值，就像使用 angularjs 在 UI-grid 中添加 [25, 50, 75]

How to add "ALL" as label and totalItems as value in paginationPageSizes select box as adding like [25, 50, 75] in UI-grid using angularjs

angularjs

angular-ui-grid