Kendo UI网格中如何显示行号

Question

我在asp.net mvc中使用kendo网格，同时使用服务器包装器。我想添加一个名为"行号"的附加列，它是一个简单的计数器（1,2,3...）。我希望这个计数器不会因为客户端排序而改变。始终将第一行标记为1，第二行标记为2，在“行号”列中。

如何在kendo网格中实现？

- Behrouz Ghazi

---

可能是重复的问题：如何将行号添加到Kendo UI网格中？ - Jesse

Answer 1

您可以使用 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: "<span class='row-number'></span>"
    }],
    dataBound: function () {
        var rows = this.items();
        $(rows).each(function () {
            var index = $(this).index() + 1;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

(演示)

- Lars Höppner

Answer 2

其他答案也可以，但是它们没有应用分页效果。所以我认为更好的实现方式是：

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;

- Morteza Tourani

---

这正是我一直在寻找的，并且对于Angular Kendo Grid的实现方式完全相同。 - Levi Fuller

以防万一，template: (dataItem) => {...} 只能在 ES6 浏览器中使用，你可能需要为 ES5 编写 function(dataItem) { var ds = ... }。 - Levi Fuller

Answer 3

我正在使用Angular和Kendo，我使用Lodash设置了索引值：

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

- sma

Answer 4

对于服务器端分页，可以在网格的列部分使用此脚本：

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

- Mohammad Taghipour

Answer 5

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: "<span class='row-number'></span>"
    }],
    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);
        });
    }
});

- Ehsan Mirsaeedi

Answer 6

另一种替代方法。你可以用三个简单的步骤来完成：

1. 创建一个变量来保存行号
2. 在dataBinding中将值降为0
3. 向模板传递一个函数，该函数将为每一行增加你的变量

- safinilnur

Answer 7

我认为更好的实现方式是：

dataBound: function () {
            if (this.dataSource && this.dataSource._total) {
                var rows = this.items();
                for (var i = 0; i < rows.length; i++) {
                    var index = i + 1
                        + (this.dataSource.pageSize() * (this.dataSource.page() - 1));
                    var rowLabel = $(rows[i]).find(".row-number");
                    $(rowLabel).html(index);
                }
            }
        }

- asdword

Answer 8

对我来说，它是这样工作的

grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    height: 543,
    scrollable: {
        virtual: true
    },
    pageable: {
        numeric: false,
        previousNext: false,
        messages: {
            display: "Showing {2} data items"
        }
    },
    columns: [
        {
            title: "#",
            // template: "#= ++record #",
            template: function(dataItem) {
                var rowNumber = 0
                if($("#grid").data("kendoGrid")) {
                  rowNumber = $("#grid").data("kendoGrid").dataSource.indexOf(dataItem) + 1;
                }
                return "<strong>" + rowNumber + "</strong>";
            },
            width: 80
        },
        { field: "FirstName", title: "First Name" },
        { field: "LastName", title: "Last Name" },
        { field: "City", title: "City" },
        { field: "Title" }
    ]
});`

在第一次渲染时，如果不使用$("#grid").data("kendoGrid")，它会显示0行。

- chintan adatiya