基于JQUERY写的 LISTBOX 选择器

本文来之于：http://blog.csdn.net/jetsteven/article/details/5104380#

1、经常用到如下图的选择器，而且要支持排序的，所以萌生用JQUERY写一个。

功能如下：

• 左右多选，移动。
• 右边的项可以上下拖动

源代码如下

/*
    name:TwoWay-Select Control for Jquery
    author:arn
    date:2009-12-29
    remark: AJAX URL返回数据必须是json格式{state:1,msg:'',fields:[]}
            1、右边可以上下拖动
            2、$('#div').twowaylist({url:'',onBeforeSubmit:'',captionColumn''});
            3、$('#div').twowaylistinit({field_no:'xx',...});
            4、$('#div').twowaylistsubmit({'rptid':$('#txtid').val(),'act':'rpt'}) //AJAX URL用到的参数
*/
(function($){
    $.addList = function(t,p)
    {
        if (t.checkbox) return false; //return if already exist    
        
        // apply default properties
        p = $.extend({
            items:[], //ALL ITEMS
            captionColumn:'caption', //显示的名称
            isgroupColumn:'group', //分组CHECKBOX用到的字段
            idColumn:'FIELD_NO', //编号字段
             height: 320, //default height
              'auto', //auto width
             url: false, //ajax url
             method: 'POST', // data sending method
             errormsg: 'Connection Error',
             title: false,
             dataType:'json',
             onSuccess: false, // using a custom populate function
             onBeforeSubmit: false //提交之前处理事项
          }, p);
              
        //create twoway-select class
        var d = {
            json2str:function(json)
            {
                var isArrObj = $.isArray(json);
                var arr = [];
                //
                for (var key in json) 
                {
                    var k = isArrObj? '' :  key+":" ;
                    
                    if (typeof json[key] == 'object' && json[key] != null)
                        arr.push(k + d.json2str(json[key]));            //JSON对象
                    else
                        arr.push(k + "'" + decodeURIComponent(json[key]) +"'");    //普通值
                }
                return isArrObj ? '[' + arr.join(',') + ']' : '{' + arr.join(',') + '}';
            },
            str2json:function(str)
            {
                return eval('('+str+')');
            },        
            l2r:function(o){
                
                var json = d.str2json($(o).attr('json'));
                var chk = document.createElement("input");
                //IF GROUP
                var chked = json[p.isgroupColumn]==1?'checked':'';
                $(chk).attr({'type':'checkbox','id':'li'+json[p.idColumn],'checked':chked});
                $(o).prepend(chk);
                $(d.rdiv).find('ol').append(o);
                //change json value,if checkbox state changed
                $(o).find("input:checkbox").bind('click',function()
                {
                    if($(this).attr('checked'))
                    {
                        json[p.isgroupColumn] = 1;
                    }else{
                        json[p.isgroupColumn] = 0;
                    }                        
                    $(o).attr("json",d.json2str(json));
                });            
                $(d.vinput).val(d.getselected());
            },
            r2l:function(o){
                $(o).find(":checkbox").remove();
                $(d.ldiv).find('ol').append(o);
                $(d.vinput).val(d.getselected());
            },
            l2rAll:function(){
                $("li", $(d.ldiv).find('ol')).each(function(i,obj){
                    d.l2r(obj);
                });            
            },
            r2lAll:function(){
                $("li", $(d.rdiv).find('ol')).each(function(i,obj){
                    d.r2l(obj);
                });             
            },
            getselected:function(){
                var result=[];
                
                $(d.rdiv).find('li').each(function(i,obj){
                    result.push($(this).attr('json'));
                });               
                return result;
            },      
            initData:function(data){
                $(d.ldiv).find('ol').empty();
                $(d.rdiv).find('ol').empty();
                var li;
                var lbl;
                for (i=0;i<data.length;i++){
                    var li = document.createElement('li');
                    lbl = document.createElement('label');
                    if(true)
                    {
                        $(lbl).text(data[i][p.idColumn] + ' '+ data[i][p.captionColumn]); //.attr("for",'li' + data[i][p.idColumn])
                    }else{
                        $(lbl).text(data[i][p.captionColumn]);
                    }
                    $(li).attr('json',d.json2str(data[i])).append(lbl);
                   
                    $(d.ldiv).find('ol').append(li);                
                }
                $(d.ldiv).find('ol li').each(function(i,obj)
                {
                    $(obj).bind('dblclick',function()
                    {
                        if($(this).parent().hasClass('twowaylist-lol'))
                        {
                            d.l2r(this);
                        }else{
                            d.r2l(this);
                        }                        
                    }).bind('click',function()
                    {
                        $(this).toggleClass("ui-selected");                        
                    });                 
                });
            
            },
            ajaxSubmit:function(para){
                if(p.url){
                   
                    if(p.onBeforeSubmit) para= p.onBeforeSubmit();
                    $.ajax({
                       type: p.method,
                       timeout:20 * 1000,
                       url: p.url,
                       async:false, 
                       data: para,
                       dataType: p.dataType,
                       success: function(data){ 
                            if(data.state == 1)
                            {
                                $(d.caption).html('');
                                d.initData(data.fields); 
                                if(p.onSuccess) //执行成功后
                                {
                                    p.onSuccess();
                                }
                            }else{
                                $(d.caption).html('数据加载失败<br/>' + data.msg );
                            }
                       },
                       error: function(data) { try { alert(data.toString()) } catch (e) {} },
                       beforeSend:function(data) { },
                       complete :function(){ }
                     });                    
                }
            
            }
        };
        
        if(p.width == 'auto')
        {
            p.width = 600;
        }
        var mdivwidth = 80;
        //init div
        d.aDiv = document.createElement('div');
        
        d.ldiv = document.createElement('div');
        $(d.ldiv).addClass('twowaylist-oldiv').width((p.width - mdivwidth) /2 ).height(p.height);
        
        d.rdiv = document.createElement('div');
        $(d.rdiv).addClass('twowaylist-oldiv').width((p.width - mdivwidth) /2 ).height(p.height);
        
        d.mdiv = document.createElement('div');
        $(d.mdiv).width(mdivwidth);
        
        d.mTable = document.createElement('table');
        d.mTable.cellPadding = 0;
        d.mTable.cellSpacing = 0;
        
        //add button
        var br="<br />";
        //l2r
        var btnDiv = document.createElement('input');
        $(btnDiv).addClass('twowaylist-button').attr({'type':'button','value':'>'});
        
        $(btnDiv).click(
            function()
            {
                $('.ui-selected', d.ldiv).each(function()
                {
                    d.l2r(this);
                });
            }
        );
        $(d.mdiv).append(btnDiv);
        $(d.mdiv).append(br);
        //r2l
        btnDiv = document.createElement('input');
        $(btnDiv).addClass('twowaylist-button').attr({'type':'button','value':'<'});
        $(btnDiv).click(
            function()
            {
                $('.ui-selected', d.rdiv).each(function()
                {
                    d.r2l(this);
                });
            }
        );
        $(d.mdiv).append(btnDiv);
        $(d.mdiv).append(br);
        //l2r all
        btnDiv = document.createElement('input');
        $(btnDiv).attr({'type':'button','value':'>>'}).addClass('twowaylist-button');
        $(btnDiv).click(
            function()
            {
                d.l2rAll();
            }
        );
        $(d.mdiv).append(btnDiv);   
        $(d.mdiv).append(br);  
        //r2l all
        btnDiv = document.createElement('input');
        $(btnDiv).attr({'type':'button','value':'<<'}).addClass('twowaylist-button');
        $(btnDiv).click(
            function()
            {
                d.r2lAll();
            }
        );
        $(d.mdiv).append(btnDiv);                                           
        $('span',d.mdiv)
        .css({paddingLeft:20})
        ;            
        
        
        //set div
        d.caption = document.createElement("caption");
        $(d.mTable).append(d.caption);
        //set table th
        var thead = document.createElement("thead");
        var tr = document.createElement("tr");
        var th=document.createElement("th");
        $(th).html('待选项');
        $(tr).append(th);
        th=document.createElement("th");
        $(tr).append(th);
        th=document.createElement("th");
        $(th).html('已选项');
        $(tr).append(th);                
        $(thead).append(tr);
        $(d.mTable).append(thead);
        var tbody = document.createElement("tbody");
        
        tr = document.createElement("tr");
        
        var td = document.createElement("td");
        var lol= document.createElement("ol");
        $(lol).addClass('twowaylist-lol');
        $(d.ldiv).append(lol);
        
        $(td).append(d.ldiv);
        $(tr).append(td);
        td = document.createElement("td");
        $(td).append(d.mdiv);
        $(tr).append(td);
        td = document.createElement("td");
        
        var rol= document.createElement("ol");
        $(rol).addClass("twowaylist-rol");
        $(d.rdiv).append(rol);
        $(td).append(d.rdiv);
        $(tr).append(td);
        
        $(tbody).append(tr);
        $(d.mTable).append(tbody);
        $(t).append(d.mTable);
        
        d.vinput = document.createElement("input");
        $(d.vinput).attr({'type':'hidden','id':'twowaylistValue'});
        $(t).append(d.vinput);
        //leftlist selectable
        //$(lol).selectable();        
        //rightlist sortable
        $(rol).sortable();        
        
        t.list = d;
        //load items
        if(p.items)
        {
            d.initData(p.items);
        }
        return t;
    };
    
    var docloaded = false;
    $(document).ready(function () {docloaded = true} );
    //初始化
    $.fn.twowaylist = function(p) {
        return this.each( function() {
            var t = this;
                if (!docloaded)
                {
                    $(this).hide();
                    $(document).ready
                    (
                        function ()
                        {
                            $.addList(t,p);
                        }
                    );
                } else {
                    $.addList(this,p);
                }
            });
    }; //end twowaylist    
    //初始化列表，参数为json array
    $.fn.twowaylistinit = function(data) {
        return this.each(function(){
            if(this.list)
            {
                this.list.initData(data); 
            }
        });
    }; //end twowaylistinit
    //AJAX提交，获取字段列表，参数如{id:'2'}
    $.fn.twowaylistsubmit = function(pa) {
        return this.each(function(){
            if(this.list)
            {
                this.list.ajaxSubmit(pa); 
            }
        });
    }; //end twowaylistsubmit    
})(jQuery);