基于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: , //default height
              width: '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]==?'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] = ;
                     }else{
                         json[p.isgroupColumn] = ;
                     }
                     $(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=;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: * ,
                        url: p.url,
                        async:false,
                        data: para,
                        dataType: p.dataType,
                        success: function(data){
                             if(data.state == )
                             {
                                 $(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 = ;
         }
         var mdivwidth = ;
         //init div
         d.aDiv = document.createElement('div');

         d.ldiv = document.createElement('div');
         $(d.ldiv).addClass('twowaylist-oldiv').width((p.width - mdivwidth) / ).height(p.height);

         d.rdiv = document.createElement('div');
         $(d.rdiv).addClass('twowaylist-oldiv').width((p.width - mdivwidth) / ).height(p.height);

         d.mdiv = document.createElement('div');
         $(d.mdiv).width(mdivwidth);

         d.mTable = document.createElement('table');
         d.mTable.cellPadding = ;
         d.mTable.cellSpacing = ;

         //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:})
         ;            

         //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);