kendo grid序号显示

例子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

                }

            });

posted on 2019-02-18 16:57  城市小农民  阅读(255)  评论(0编辑  收藏  举报

导航