kendo grid序号显示

来源：互联网发布：淘宝美工外包编辑：程序博客网时间：2024/06/05 11:47

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

0 0