如何在角度ui-grid 3.0中获取行索引

Question

我正在使用角度ui-grid版本3.0并且无法找到获取行索引的方法，以向网格添加一个计算列。 我想帮助我。

Answer 1

没有办法轻松获取行的索引，因此这取决于您要做的事情。当有人对数据进行排序时，您希望编号做什么？您是希望数字保留原始数据中的数字，还是希望它们更改并与新的排序顺序对齐？

在常见问题http://ui-grid.info/docs/#/tutorial/499_FAQ中，我们发现：

这里的问题是你真正想要实现的目标。您想要实际的行索引，还是想要在所有行中显示顺序ID？

如果是后者，那么只需在数据中添加一个计数器列即可：

$scope.myData.forEach( function( row, index){
  row.sequence = index;
});

如果要在网格内部显示行的索引，则它取决于您想要的内部。您可以在grid.rows中获取行的索引，这将显示原始行列表中的行（未过滤或排序），或grid.renderContainers.body.visibleRowCache中的行的索引（已过滤和已排序），或当前显示的行中的行的渲染索引（给定虚拟化，这通常是一个特别无用的数字）。

如果您确定无论何时某人进行排序或过滤，那么数字会发生变化，那么您可以使用cellTemplate来完成，这可能是这样的：

cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'

Answer 2

cellTemplate：＆＃39; {{rowRenderIndex + 1}}＆＃39;

Answer 3

第一个解决方案的问题是它在分页时不能正常工作。索引列的celltemplate必须是这样的，以便在每个页面上都有正确的索引，而不是从每页的1开始：

{ field: 'index', displayName: 'Index', width: '50', cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)+(grid.options.paginationPageSize*(grid.options.paginationCurrentPage-1))+1}}</div>' }

此解决方案甚至可用于客户端分页或服务器端分页

Answer 4

在单元格模板中使用 rowRenderIndex ，它是每行上可用的本机变量

例如

columnDefs: [
          {
            enableFiltering: false,
            enableSorting: false,
            field: "sn",
            displayName: "Sn#",
            cellTemplate:
              "<div class=\"ui-grid-cell-contents\" >{{rowRenderIndex}} s</div>"
          }
]

Answer 5

用这种方法来解决这个问题...

$http.get('./api/ioni_users')
        .success(function(data) {
            $scope.gridOptions.data = data;
            angular.forEach(data, function(data, index) {
                data["index"] = index+1;
                //data.push({"index":index+1})
            })
        });

Answer 6

以下对我有用，因为我需要查看行的索引，因为它与整个数据集相关，而不仅仅是用户可见的内容。它可以被清理，但这是我能够使用公式

工作的原始代码

((0/100)+((2*100)-100))+1 where 

0 = rowIndex (Zero Based)
100 = pagination page size
2 = current page
+1 = because the array is zero based


cellTemplate: '<div class="ui-grid-cell-contents">{{(((grid.renderContainers.body.visibleRowCache.indexOf(row) / grid.options.paginationPageSize)*100)+((grid.options.paginationPageSize * grid.options.paginationCurrentPage) - grid.options.paginationPageSize)) + 1}} </div>'

希望这有帮助。