Use jquery to manipulate ListBox and ListBox movement

Use jquery to manipulate ListBox and ListBox movement

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") select multiple//down when the operation is not effective


{


$ (Own). Next (). InsertBefore ($ (own));


}


})


}


}

Look at a detailed code below

/*


Name:twoway-select Control for jquery


Author:arn


date:2009-12-29


Remark:ajax URL return data must be in JSON format {state:1,msg: ', fields:[]}


1, right can drag up and down


2. $ (' #div '). Twowaylist ({url: ', Onbeforesubmit: ', CaptionColumn '});


3. $ (' #div '). Twowaylistinit ({field_no: ' xx ',...});


4. $ (' #div '). Twowaylistsubmit ({' Rptid ': $ (' #txtid '). Val (), ' act ': ' rpt '}//ajax the parameters used by the 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 ',//display name


Isgroupcolumn: ' group ',//field used by the Group checkbox


Idcolumn: ' Field_no ',//Number field


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//submission of prior processing matters


}, 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 object


Else


Arr.push (k + "'" + decodeuricomponent (Json[key]) + "'"); Normal value


}


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)//After successful execution


{


P.onsuccess ();


}


}else{


$ (d.caption). HTML (' Data load failed <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 tutorial ({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 (' pending option ');


$ (TR). append (th);


Th=document.createelement ("th");


$ (TR). append (th);


Th=document.createelement ("th");


$ (TH). HTML (' already selected ');


$ (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});


Class


$.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


Initializes a list with the parameter JSON array


$.fn.twowaylistinit = function (data) {


Return This.each (function () {


if (this.list)


{


This.list.initdata (data);


}


});


}; End Twowaylistinit


Ajax Commit, Get field list, parameters such as {ID: ' 2 '}


$.fn.twowaylistsubmit = function (PA) {


Return This.each (function () {


if (this.list)


{


This.list.ajaxsubmit (PA);


}


});


}; End Twowaylistsubmit


}) (jquery);