Use jquery to manipulate ListBox and ListBox movement

Source: Internet
Author: User
Tags join

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.