深入学习jquery源码之easyui自定义列表

深入学习jquery源码之easyui自定义列表

(function ($) {
    function init(target) {
        var t = $(target),
            state = $.data(target, 'gridsub'),
            key = state.options.key;
        var editIndex = undefined;
        function endEditing() {
            if (editIndex == undefined) { return true }
            if (t.datagrid('validateRow', editIndex)) {
                var ed = t.datagrid('getEditor', { index: editIndex, field: key });
                t.datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        t.datagrid({
            title: state.options.title,
            width: state.options.width,
            onClickRow: function (index) {
                if (endEditing()) {
                    t.datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                    editIndex = index;
                } else {
                    t.datagrid('selectRow', editIndex);
                }
            },
            rownumbers: state.options.rownumbers,
            singleSelect: state.options.singleSelect,
            toolbar: state.options.toolbar,
            pagination: state.options.pagination,
            columns: state.options.columns,
            data: state.options.data,
        });
        $(state.options.toolbar).find("a.add").on("click", function (e) {
            if (endEditing()) {
                t.datagrid('appendRow', {});
                editIndex = t.datagrid('getRows').length - 1;
                t.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
            }
        });
        $(state.options.toolbar).find("a.save").on("click", function (e) {
            if (t.datagrid('validateRow', editIndex)) {
                var ed = t.datagrid('getEditor', { index: editIndex, field: key });
                t.datagrid('endEdit', editIndex);
                t.datagrid('acceptChanges');
                var rows = t.datagrid('getSelected');
                t.datagrid("updateRow", rows);
            }
        });
        $(state.options.toolbar).find("a.del").on("click", function (e) {
            var rows = t.datagrid('getSelected');
            var editIndex = t.datagrid("getRowIndex", rows);
            if (!rows) {
                $Core.UI.message.warning("请选择一条数据"); return false;
            }
            t.datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
            editIndex = undefined;
        });
        $(state.options.toolbar).find("a.cancel").on("click", function (e) {
            var row = t.datagrid('getSelected');
            t.datagrid('endEdit', editIndex)
            // if (!state.options.key) {
            //     t.datagrid('deleteRow', editIndex);
            // }
            editIndex = undefined;
        });
    }
    // 插件的定义     
    $.fn.gridsub = function (options, param) {
        if (typeof options == 'string') {
            var method = $.fn.gridsub.methods[options];
            if (method) {
                return method(this, param);
            }
        }
        return this.each(function () {
        	debugger;
            var state = $.data(this, "gridsub");
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, "gridsub",
                    {
                        options: $.extend(true, {}, $.fn.gridsub.defaults, options)
                    });
            }
            init(this);
        });
    };


    $.fn.gridsub.methods = {
        getRows: function (jq) {
            return $(jq[0]).datagrid("getRows");
        },
        load: function (jq, value) {
            return $(jq[0]).datagrid({ data: value });
        }
    };
    // 插件的defaults     
    $.fn.gridsub.defaults = {
        title: '',
        width: 300,
        //onClickRow: state.onClickRow,
        rownumbers: false,
        singleSelect: false,
        // toolbar: state.toolbar,
        pagination: false,
        columns: [],
        data: [],
    };
    // 闭包结束     
})(jQuery);

使用

	$("#dglist2").gridsub({
		    title: '设备',
		    width: 1200,
		    key: "id",
		    rownumbers: false,
		    singleSelect: true,
		    toolbar: ".btn_tool2",
		    pagination: false,
		    columns: [[ ]],
		});

 

实现过程

this中没有gridsub的属性，通过$.data向元素附加数据