如何在Kendo UI Grid中拥有行号
我在asp.net mvc中有kendo网格，我使用服务器包装器。我想要名为“行号”的附加列，它是简单的计数器（1,2,3，…）。 我希望这个计数器永远不会改变客户端排序。 始终第一行是1秒，第2行是……，在“RowNumber”列中
我怎么能在剑道网格中这样做？
其他答案都可以，但它们不适用分页效果。 所以我认为更好的实施将是：
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;
我一起使用Angular和Kendo，我设置了这样的索引值（使用Lodash）：
dataBound : function () { _.each(this.items(), function (item, i) { var rowScope = angular.element(item).scope(); rowScope.dataItem.index = i; }); }
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); }); } });
对于服务器端分页，可以使用此脚本（在网格的列部分中）：
{ title: "#", template: dataItem => (grid.dataSource.page() - 1) * grid.dataSource.pageSize() + grid.dataSource.indexOf(dataItem) + 1, width: 45},