kendo grid序号显示

对于kendo grid列表数据的显示，习惯性的需要加上一列序号列；

解决方法：（一）后台返回值时，增加一列自增的序号列；

（二）前台操作显示序号列。

本文展示的是解决方法二的kendo序号显示。

例子1：分页后序号仍旧从1开始重新计算。

$("#grid").kendoGrid({
sortable: true,
dataSource: [{
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "John Doe",
age: 33
}],
columns: [{
field: "name"
}, {
field: "age"
}, {
field: "rowNumber",
title: "序号",
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);
});
},
pageable: {
pageSize: 2
}
});

例子2：分页后序号按显示的数目继续增加；

$("#grid").kendoGrid({
sortable: true,
dataSource: [{
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "John Doe",
age: 33
}],
columns: [{
field: "name"
}, {
field: "age"
}, {
field: "rowNumber",
title: "序号",
template: "<span class='row-number'></span>"
}],
dataBound: function () {
var rows = this.items();
var page = this.pager.page() - 1;
var pagesize = this.pager.pageSize();
$(rows).each(function () {
var index = $(this).index() + 1 + page * pagesize;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
});
},
pageable: {
pageSize: 2
}
});

主要代码在dataBound中处理。可根据需求来显示序号。