Rich Easyui plugin - lookup

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The plug-in uses:

  Mainly used in the form of a field, the content is recorded by other ID table. Of course, you can use the combobox, combotree, combogrid and so on, but sometimes the performance is not very good, hope to pop up a layer, and then do some query and selection of operation. So the package, for later use, without writing code duplication.

Effect diagram:

  


Method of use:

  Related patterns using the Easyui plug-in, so need to use related scripts into Easyui and style.

  

var lu = $('#txt_ParentId').lookup({
        title: 'Select the superior region',
        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'); // Close the window
                    }
                });
            }
        }
    }).lookup('setText', 'Please select a region').lookup('setValue', -1);        

  

 dialog:{} Here is the Easyui parameter dialog, what are the same


Plugin source code:

css

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

The picture:

js

/*
Crazy scholar(1055818239) 
version: 0.01
*/
(function ($) {

    // Create a DOM control
    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');

        // Add an icon
        if (state.options.iconCls) {
            arrow.find('.combo-arrow').addClass(state.options.iconCls);
        }
        else {
            arrow.find('.combo-arrow').addClass('icon-search');
        }

        // Create 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: 'Choice',
            width: 400, height: 300
        },
        onOpened: function() {
        }
    }

})(jQuery);

  




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Caspar at November 15, 2013 - 2:52 AM