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