豐富Easyui 的插件 - lookup

插件用途：

　　主要用於表單中，某字段的內容是用其他表里的記錄ID。當然你可以使用combobox、combotree、combogrid等，但有時這些表現方式並不是很好，希望彈出個層，然后在去做一些查詢並選取的操作。所以就封裝了一下，方便以后使用，不用在寫重復的代碼。

效果圖：

　　

 

使用方法：

　　插件使用Easyui 的相關樣式，所以使用時需要引入Easyui 的相關腳本及樣式。

　　

var lu = $('#txt_ParentId').lookup({
        title: '選擇上級區域',
        dialog: {
            content: '<ul id=ptree></ul>',
            height: 400,width:300,
            onOpen:function() {
                $('#ptree').tree({
                    url: actionUrl,
                    data: $('#areatree').tree('getData'),
                    onClick: function(node) {
                        lu.lookup('setValue', node.id).lookup('setText', node.text);

                        lu.lookup('close'); // 關閉彈窗
                    }
                });
            }
        }
    }).lookup('setText', '請選擇區域').lookup('setValue', -1);        

　　

 dialog:{} 這里就是Easyui 中的dialog ，參數神馬的都一樣

 

插件源碼：

css

 .lookup .combo-arrow{
    background:url(../images/icon-select.gif) no-repeat 50% 50%;
}

圖片：

js

/*
瘋狂秀才（1055818239） 
version: 0.01
*/
(function ($) {

    // 創建控件DOM
    function create(target) {
        var id = $(target).attr('id');

        if (!id) {
            id = 'lookup_' + new Date().getTime();
            $(target).attr('id', id);
        }

        $(target).addClass('combo-f').hide();

        var lookup = $('<span class="combo"></span>').insertAfter(target);
        var textbox = $('<input type="text" class="combo-text" />').appendTo(lookup);
        var arrow = $("<span><span class=\"combo-arrow \"></span></span>").appendTo(lookup);
        var valbox = $("<input type=\"hidden\" class=\"combo-value\">").appendTo(lookup);

        lookup.addClass('lookup');



        var state = $.data(target, 'lookup');

        // 添加圖標
        if (state.options.iconCls) {
            arrow.find('.combo-arrow').addClass(state.options.iconCls);
        }
        else {
            arrow.find('.combo-arrow').addClass('icon-search');
        }

        // 創建 dialog
        var _dialogOpts = {
            closed: true,
            title: state.options.title,
            onClose:function() {
                state.dialog.dialog('destroy');
                state.dialog = null;
            }
        }
        
        var name = $(target).attr("name");
        if (name) {
            lookup.find("input.combo-value").attr("name", name);
            $(target).removeAttr("name").attr("comboName", name);
        }
        textbox.attr("autocomplete", "off");

        arrow.on('click', function () {
            
            if (!state.dialog) {
                var did = 'dialog_' + id + '-' + new Date().getTime();
                _dialogOpts = $.extend({}, state.options.dialog, _dialogOpts);

                var _dialog = $('<div/>').attr('id', did).dialog(_dialogOpts);
                state.dialog = _dialog;
            }

            state.dialog.dialog('open');
        });

        state.textbox = textbox;
        state.valbox = valbox;
        

    }

    $.fn.lookup = function (options, param) {
        if (typeof options == 'string') {
            var method = $.fn.lookup.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.lookup(options, param);
            }
        }

        options = options || {};

        return this.each(function () {
            var state = $.data(this, 'lookup');
            if (state) {
                $.extend(state.options, options);
                create(this);
            }
            else {
                $.data(this, 'lookup', { options: $.extend({}, $.fn.lookup.defaults, options) });
                create(this);
            }
        })

    }


    $.fn.lookup.methods = {
        open: function () { },
        close: function (jq) {
            return jq.each(function() {
                var state = $.data(this, 'lookup');
                state.dialog.dialog('close');
            });
        },
        setValue: function (jq, val) {
            return jq.each(function () {
                var state = $.data(this, 'lookup');
                state.valbox.val(val);
            });
            
        },
        getValue: function (jq) {
            var state = $.data(jq[0], 'lookup');
            return state.valbox.val();

        },
        setText: function (jq, text) {
            return jq.each(function () {
                var state = $.data(this, 'lookup');
                state.textbox.val(text);
            });

        },
        getText: function (jq) {
            var state = $.data(jq[0], 'lookup');
            return state.textbox.val();
        }
    }

    $.fn.lookup.defaults = {
        iconCls: '',
        width: 120, height: 'auto',
        dialog: {
            title: '選擇',
            width: 400, height: 300
        },
        onOpened: function() {
        }
    }

})(jQuery);