jquery开发插件

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
2.jQuery.fn.extend(object);给jQuery对象添加方法。

jQuery便是一个封装得非常好的'类'，比如我们用语句$("#div1")会生成一个 jQuery类的实例。

jQuery.extend(object);

为jQuery类添加类方法，可以理解为添加静态方法。

jQuery.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
jQuery.min(2, 3); //  2 
jQuery.max(4, 5); //  5

jQuery.fn.extend(object);

就是为jQuery类添加“成员函数”。jQuery类的实例才可以调用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({
    alertWhileClick: function() {
        $(this).click(function() {
            alert($(this).val());
        });
    }
});
//$("#input1")是jQuery的实例，调用这个扩展方法
$("#input1").alertWhileClick();

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()

jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，在jQuery.JS中到处体现这一点

jQuery.fn = jQuery.prototype

你可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。

(function($) {
    $.fn.tooltip = function(options) {};
    //等价于 var
    tooltip = {
        function(options) {}
    };
    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})(jQuery);

easyui的扩展插件

DataGrid

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

方法

插件

/**
 * 扩展带工具栏的datagrid ，工具栏中的按钮样式 用 add, del,save,cancel
 */
(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 () {
            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);

插件使用

                <div class="dg2" style="width:600px;height:300px;margin:10px auto;">
                    <table id="dglist2"></table>
                    <div class="btn_tool2" style="padding:5px;height:auto">
                        <a href="javascript:void(0)"  id="listAdd" class=" easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
                        <a href="javascript:void(0)" class="del easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
                        <a href="javascript:void(0)" class="save easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
                        <a style="display:none;" href="javascript:void(0)" class="cancel easyui-linkbutton"
                           data-options="iconCls:'icon-undo',plain:true">取消</a>
                        <!--<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>-->
                    </div>
                </div>

$("#dglist2").gridsub({
		    title: '物资',
		    width: 700,
		    key: "id",
		    rownumbers: false,
		    singleSelect: true,
		    toolbar: ".btn_tool2",
		    pagination: false,
		    columns: [[
		        { field: 'materialStoreId', checkbox: true, hidden: true },
		        {
		            field: 'materialName', title: '物资名称 ', width: '25%', align: 'center', sortable: false
		        },
		        {
		            field: 'materialType', title: '物资类型', width: '25%', align: 'center', formatter: function (value, row, index) {return $Core.DicCache.get('material_type')[value]; }
		        },
		        { field: 'materialInNum', title: '物资数量', width: '25%', align: 'center', sortable: false, editor: { type: 'numberbox', options: { required: false, validType: 'numeric' } } },
		        {
		            field: 'materialModel', title: '规格型号', width: '25%', align: 'center', sortable: false
		        },
		        {
		            field: 'materialProductionDate', title: '生产日期', width: '25%', align: 'center', sortable: false
		        },
		        {
		            field: 'materialManufacturer', title: '生产厂家', width: '25%', align: 'center', sortable: false
		        },
		        {
		            field: 'materialCycle', title: '使用周期', width: '25%', align: 'center', sortable: false
		        },
		        ]],
	
		    //  data: [],
	
	
		});



var rows2 = $("#dglist2").gridsub("getRows");

扩展插件

(function ($) { /*** 统一设置datagrid 的一些默认参数*/
      $.extend($.fn.datagrid.defaults,
        {
            rownumbers: true,
            fit: true,
            pagination: true,
            striped: true,
            method: "post",
            pageSize: 20,
            pageList: [20, 50, 100]
        });
    $.extend($.fn.combobox.defaults,
        {
            editable: false,
            panelHeight: 'auto',
            valueField: 'id',
            textField: 'text',
            labelPosition: 'left',
            method: "get",
            loadFilter: function (data) {
                if ($.util.isArray(data.data))
                    return data.data;
                return data;
            },
            onShowPanel: function () {
                arrowrotate($(this), true);
            },
            onHidePanel: function () {
                arrowrotate($(this), false);
            }
        });   
})(jQuery);

扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。

    $("#customerType").combobox({
        url: _self.dicurl+'customerType',
        label: '用户类型'
    });

扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。

    var buttons = $.extend([], $.fn.datebox.defaults.buttons);
    buttons.splice(1,
        1,
        {
            text: '清空',
            handler: function (target) {
                $(target).combo("setValue", "").combo("setText", ""); // 设置空值  
                $(target).combo("hidePanel"); // 点击清空按钮之后关闭日期选择面板  
            }
        });
    $.fn.datebox.defaults.buttons = buttons;

DataGrid

猜你喜欢