[easyui]封装一个datagrid

上一篇写的是封装了dialog，那么这一篇就来看看datagrid如何封装吧。

我希望最终是这样使用的

html

<table id="dg"></table>

js

// 定义(此时还未进行渲染)(一个选择器，一个参数配置)
var datagrid = new hm.datagrid('#dg',{
    rownumbers:true,
    columns:[[]],
    data:[]
});
// 初始化(渲染)
datagrid.init();
// 调用方法（此方法会先执行init(),所以除非必要是不需要手动调用init()方法的）
datagrid.invoke('appendRow',{});

为什么我会想到要这样封装

项目里碰到这样的需求，有一张表格是用来录入的，录入完成后直接将表格所有数据一次性提交，这里就要求某个字段不能重复。

首先明确这肯定是在添加数据之前进行判断，这里我都是调用appendRow进行行添加的，那就在我调用这句代码之前判断咯。

确实这是一种很普遍的做法吧，后来我又想，有没有对应的事件呢？在调用appendRow的时候会先触发该事件，如果返回false则不执行appendRow

然而并没有。

我突然觉得这个可以有！！

如果有这个事件，那我判断是否重复就写在该事件里，不符合条件的行就return false不让它添加。因为我这里appendRow只有一处倒是无所谓，万一还有别的地方也有appendRow呢，难道再判断一次？

完整代码 datagrid.js

说是完整代码，其实这里我只是提取出来最基本的代码，还可以自己扩展参数什么的

(function () {
    'use strict';
    // selector 选择器 
    // options  参数
    function datagrid(selector, options) {

        // 方便给datagrid.methods里面的方法获取到引用
        var target = {
            datagrid: null,
            options: null
        };

        return {
            init: function () {
                if (null === target.datagrid) {
                    target.options = $.extend({}, datagrid.defaults, datagrid.events, options);
                    target.datagrid = $(selector).datagrid(target.options);
                }
                return this;
            },
            // 原本所有需要调用datagrid方法全部改为此方法
            invoke: function (method, params) {
                var result;

                // 确保已经初始化了
                this.init();

                if (datagrid.methods[method]) {
                    result = datagrid.methods[method].call(target, params);
                } else {
                    result = target.datagrid.datagrid(method, params);
                }
                // 这一句为了达到链式调用的效果
                if (result === target.datagrid) { return this; }
                return result;
            }
        }
    }

    datagrid.defaults = {
        singleSelect: true,
        rownumbers: true
    };
    datagrid.events = {
        onBeforeAppendRow: function (row) { },
        onAfterAppendRow: function (row) { }
    };
    datagrid.methods = {
        // 重写appendRow方法，添加了两个事件。
        appendRow: function (row) {
            // 如果返回false，取消本次添加
            if (false === this.options.onBeforeAppendRow.call(this.datagrid, row)) { return; }
            this.datagrid.datagrid('appendRow', row);
            this.options.onAfterAppendRow.call(this.datagrid, row);
        }
    };


    window.hm.datagrid = datagrid;
})();

总结

封装之后就会感觉一切都掌握在自己手里啊。

问题

可以看到我将参数、事件、方法都分开来写了，我当然是想能够很好的分离代码。

但我在想一个无聊的问题，比如我想要在单击行的时候显示行坐标，那自然是这样

datagrid.events = {
    ...
    onClickRow: function(index,row) {
        console.log(index);
    }
    ...
}

确实这样可以，但如果具体某一个表格也定义了onClickRow的话，这个就被覆盖掉了，我想要的是如何能保证绝对执行。

如果在datagrid函数内部添加的话，是可以做到的。

function datagrid(selector,options){
    ...
    return {
        init: function() {
            ...
            if (null === target.datagrid) {
                target.options = $.extend({}, datagrid.defaults, datagrid.events, options);
                target.options.onClickRow = function(index, row) {
                    // 这里是我想要的操作
                    console.log(index);
                    // 这里判断是否自定义了该事件
                    if(options.onClickRow) {
                        options.onClickRow.call(this,index,row);
                    }
                }
                target.datagrid = $(selector).datagrid(target.options);
            }
            return this;
        }
    }
}

但我想把这个事件分离出来，就写在 datagrid.events下面，这就是头疼的问题了。