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