kendo grid显示行号/序号列（二）

基于上篇博文中提到的序号列，每新建一个grid就需要重新写一遍绑定事件；

所以本文将封装一个kendo grid实现序号列的可控显示。

 /*
     *
     * ExtGrid
     *
     */
    var ExtGrid = kendo.ui.Grid.extend({

        init: function (element, options) {
            var that = this;
            
            that._orderNumber(options);
            
            kendo.ui.Grid.fn.init.call(that, element, options);
            that._RegisterRowNumber(options);
        },
        _orderNumber: function (options) {
            if (options.rowNumber) {
                var that = this;
                var rowTemplate = '#= count #';
                var renderRowCount = function () {

                    that.options._count += 1;
                    return kendo.render(kendo.template(rowTemplate), [{ count: that.options._count }]);
                }
                
                if (options.rowNumber) {
                    if (options.columns) {
                        //1. 添加行号列
                        options.columns.splice(0, 0, { attributes: { 'class': 'tight-cell' }, editor: null, editable: false, title: '', template: renderRowCount, width: "38px" });
                    }
                }
            }
        },
        _RegisterRowNumber: function () {
            var that = this;
            if (that.options.rowNumber) {
                var that = this;
                that.bind('dataBinding', function () {
                    that.options._count = (that.dataSource.page() - 1) * that.dataSource.pageSize();
                    that.options._count = isNaN(that.options._count) ? 0 : that.options._count;
                });
            }
        },
        options: {
            name: 'ExtGrid',
            _count: 0,
            rowNumber: false
        }
    });

    kendo.ui.plugin(ExtGrid);

完成ExtGrid的封装：下面直接使用

$("#grid").kendoExtGrid({
                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"
                }],
                pageable: {
                    pageSize: 2
                },
                rowNumber: true,
            });

注意上面使用的名称为 kendoExtGrid，并且需要配置options属性rowNumber:true则会显示序列号，不写或者是写false

则是不需要显示序号列。