Question

这是我的columnDef

$scope.communityColDef = [{ field: 'name', displayName: 'Name' },
                          { field: 'description', displayName: 'Description' }];

我的数据中没有索引号，但在网格中显示时我想用行号显示它。有一个选项可以在jqGrid中设置行号，但我在angularJS中找不到类似的功能。

Answer 1

好的，我找到了一种方法，但它有多个问题。首先它只是视觉，这意味着我没有明确设置字段数据或以前一个答案的方式改变你的项目。另外，我不知道我的解决方案如何与不同的排序或其他ngTable函数交互。

以下是代码：

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];  
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [
        {displayName:'#', cellTemplate: '<div>{{$parent.$index + 1}}</div>'},
        {field: 'name', displayName: 'Name'},
        {field:'age', displayName:'Age'}]
    };
});

这是一个纯粹的化妆品解决方案，行号在左侧的新列中添加，类似于它在jquery中的工作方式。这样做的好处是，您不必更改您的数据或项目只是为了启用行号，但会出现我之前提到的问题。

Here我是一个展示我的解决方案的人。

Answer 2

在将数据设置为网格选项之前，在数据json中添加索引。

<强> CODE

$scope.communityColDef = [{
    field: 'index',
    displayName: 'Sr. Number'
}, {
    field: 'name',
    displayName: 'Name'
}, {
    field: 'description',
    displayName: 'Description'
}];

$scope.items = data;
//adding index for showing serial number
angular.forEach($scope.items, function(item, index) {
    item.index = index + 1;
});
$scope.gridOptions.columnDefs = $scope.communityColDef;
$scope.gridOptions.data = $scope.items;

希望这可以帮助你。谢谢。

Answer 3

您还可以在单元格模板中使用row.rowIndex。我修改了以上plunker

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];  
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [
        {displayName:'#', cellTemplate: '<div class="ngCellText" data-ng-class="col.colIndex()"><span>{{row.rowIndex + 1}}</span></div>'},
        {field: 'name', displayName: 'Name'},
        {field:'age', displayName:'Age'}]
    };
});

如何在角度上显示ng-grid的当前行索引？

3 个答案: