Angular UI 网格无法对具有行索引的列进行排序答案

【问题标题】：Angular UI grid unable to sort column which has row indexAngular UI 网格无法对具有行索引的列进行排序
【发布时间】：2017-04-19 14:44:56
【问题描述】：

我有一个包含名称、价格等列的网格。在这个网格中，我添加了另一个描述序列号的列。即 1,2,3...。为了生成这个，我使用了 cellTemplate: '{{rowRenderIndex+1}}'

现在我想根据此列和序列号进行排序。但是排序不起作用。我尝试将 type:'number' 添加到列定义中。仍然没有在有序列号的列上进行排序。

这是我的小提琴链接 http://plnkr.co/edit/zgQKyaS7KbJeZoyzPLKf?p=preview

我的html

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
</div>

我的 JS var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
       { name: 'SL NO' ,cellTemplate: '<div>{{rowRenderIndex+1}}</div>', type:'number'},
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };


 $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions1.data = data;
    });
}]);

我想在这里对包含行索引的名称为 SL NO 的列进行排序。

【问题讨论】：

标签： javascript angularjs sorting

【解决方案1】：

首先，rowRenderIndex 不适用于排序目的，因为它在渲染后显示行索引，因此如果您向下滚动网格，您会注意到数字会自动调整。

其次，您可以使用 IndexOf 函数来获取行索引，但它不会解决排序问题，

// { name: 'SL NO' ,field:'index',cellTemplate: '<div class = "ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', type:'number'},

这是最终的工作代码 sn-p:-

 columnDefs: [
  {field:'index'},
  { field: 'name' },
  { field: 'gender' },
  { field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
  $scope.grid1Api = gridApi;
}
 };
 $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
  $scope.gridOptions1.data = data;
   angular.forEach(data, function(data, index) {
            data["index"] = index+1;

这里是 plunkr：http://plnkr.co/edit/LiDWg8ozwdEo290xUqNe?p=preview

【讨论】：