如何在KendoUIGrid中拥有行号-HowCanIHaveRowNumberInKendoUIGrid

9  

You can use the dataBound event:

您可以使用dataBound事件:

$("#grid").kendoGrid({
    sortable: true,
    dataSource: [{
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    }],
    columns: [{
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: ""
    }],
    dataBound: function () {
        var rows = this.items();
        $(rows).each(function () {
            var index = $(this).index() + 1;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

(demo)

7  

Other answers are OK but they don't apply pagination effects. So I think better implementation would be:

其他答案都可以,但它们不适用分页效果。所以我认为更好的实施将是:

var grid = $( "#grid" ).kendoGrid( {
    sortable: true,
    dataSource: [ {
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    } ],
    pageable: {
        refresh: false,
        pageSizes: true,
        pageSize: 10,
    },
    columns: [ {
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: dataItem => grid.dataSource.indexOf(dataItem) + 1
    } ],
} ).data().kendoGrid;

2  

I am using Angular and Kendo together and I set the index value like this (using Lodash):

我一起使用Angular和Kendo,我设置了这样的索引值(使用Lodash):

dataBound : function () {
   _.each(this.items(), function (item, i) {
      var rowScope = angular.element(item).scope();
      rowScope.dataItem.index = i;
   });
}

0  

Lars Hoppner`s Answer Was Correct, But If You Change The page, the numbering will get reset. my solution was to add page number and page size to the formula:

Lars Hoppner的答案是正确的,但如果您更改页面,编号将被重置。我的解决方案是在公式中添加页码和页面大小:

$("#grid").kendoGrid({
    sortable: true,
    dataSource: [{
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    }],
    columns: [{
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: ""
    }],
    dataBound: function () {
        var rows = this.items();
        $(rows).each(function () {
            var index = $(this).index() + 1 
            + ($("#grid").data("kendoGrid").dataSource.pageSize() * ($("#grid").data("kendoGrid").dataSource.page() - 1));;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

0  

For server side pagination this script can be used (in columns section of grid):

对于服务器端分页,可以使用此脚本(在网格的列部分中):

{ title: "#", 
  template: dataItem => (grid.dataSource.page() - 1) *
            grid.dataSource.pageSize() + 
            grid.dataSource.indexOf(dataItem) + 1, 
  width: 45},