[导读]利用jquery 来操作 listbox和listbox内移动function listbox_move(listfrom,listto) { var size = $(" " + listfrom + " option") size(); var selsize = $(" " + listfrom + " option:s
利用jquery 来操作 listbox和listbox内移动
function listbox_move(listfrom,listto) { var size = $("#" + listfrom + " option").size(); var selsize = $("#" + listfrom + " option:selected").size(); if(size>0 && selsize>0) { $.each($("#"+listfrom+" option:selected"), function(i,own){ // var stext = $(own).text(); // var svalue = $(own).val(); // $("#" + listto).append("<option value="" + svalue + "">" + stext + "</option>"); // $(own).remove(); $(own).appendto($("#" + listto)); $("#" + listfrom + "").children("option:first").attr("selected",true); }); } } function listbox_order(listname,action) { var size = $("#"+listname+" option").size(); var selsize = $("#"+listname+" option:selected").size(); if(size > 0 && selsize > 0) { $.each($("#"+listname+" option:selected"),function(i,own){ if(action == "up") { $(own).prev().insertafter($(own)); } else if(action == "down")//down时选中多个连靠则操作没效果 { $(own).next().insertbefore($(own)); } }) } }
下面看一款详细代码
/* 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);