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中处理。可根据需求来显示序号。