基于JQUERY写的 LISTBOX 选择器

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 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]==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);