Dojo: How to implement a ListBox-style fromto function with MultiSelect

Features you want to implement such as:

The main issues to be addressed include two areas:

One is the work of Multiselet initialization, and the other is the implementation of the FROMTO function button. This is mainly because the MultiSelect control is store-independent and not as useful as a select or ComboBox.

The following is a simple process:

Step1:html part

<table align= "center" ><tr><td ><fieldset><legend><font color= "Red" ><b> Configuration Management </b></font></legend> <table align= "center" ><tr><td><select id= " Fromconfigselect "></select></td><td><input type=" button "id=" Fromconfigbutton "value=" >> "/><br><input type=" button "id=" Toconfigbutton "value=" << "/><br></td> <td><select id= "Toconfigselect" ></select></td></tr></table></fieldset &GT;&LT;/TD&GT;&LT;TD ><fieldset><legend><font color= "Red" ><b> people management </b></font ></legend> <table align= "center" ><tr><td><select id= "Fromhumanselect" ></ Select></td><td><input type= "button" id= "Fromhumanbutton" value= ">>"/><br>< Input type= "button" id= "Tohumanbutton" value= "<<"/><br></td><td><select id= " TohumanselECT "></select></td></tr></table></fieldset></td></tr><tr> &LT;TD ><fieldset><legend><font color= "Red" ><b> Supply Management </b></font></legend > <table align= "center" ><tr><td><select id= "Fromsupplyselect" ></select></td ><td><input type= "button" id= "Fromsupplybutton" value= ">>"/><br><input type= "button" Id= "Tosupplybutton" value= "<<"/><br></td><td><select id= "Tosupplyselect" ></ SELECT&GT;&LT;/TD&GT;&LT;/TR&GT;&LT;/TABLE&GT;&LT;/FIELDSET&GT;&LT;/TD&GT;&LT;TD ><fieldset><legend ><font color= "Red" ><b> Repair management </b></font></legend> <table align= "center" >< Tr><td><select id= "Frommaintainselect" ></select></td><td><input type= "button "Id=" Frommaintainbutton "value=" >> "/><br><input type=" button "id=" Tomaintainbutton"Value=" << "/><br></td><td><select id=" Tomaintainselect "></select></td ></tr></table></fieldset></td></tr><tr></tr><tr></tr> </table>

　　

Step2:multiselect initialization (with configuration management as an example), where the data from the drop-down box is obtained from the server-side request

    Configuration Management dropdown box var fromconfig,multifromconfig; var storefromconfig;request.get ("Roleinputgetjsonaction.action?mode=query&roleinput.fromselect=config", {            Handleas: "JSON"})//queries the server for the device name corresponding to the WBS. Then (function (data) {Storefromconfig=new Memory ({data:data}); Create a drop-down box for configuration management Fromconfig = Dom.byid (' Fromconfigselect '); index=0; For (var item in storefromconfig.data) {var option = Win.doc.createElement (' option '); option.innerhtml= Storefromconfig.data[index].name;option.value=storefromconfig.data[index].id;index++;fromconfig.appendchild ( option);} Multifromconfig = new MultiSelect ({name: ' Multifromconfig ', Size:4,style: "width:180px;",}, Fromconfig);   Multifromconfig.startup ();    }); var toconfig,multitoconfig;    var storetoconfig;                       Storetoconfig=new Memory ({}); Toconfig = Dom.byid (' Toconfigselect '); multitoconfig = new MultiSelect ({name: ' Multitoconfig ', Size:4,style: "Width: 180px; ",}, Toconfig); Multitoconfig.startup ();

Step3: Handlers for button events

 Removes functions for all child nodes of Select, and multiple buttons use function Removeallchildren (Multiselectdomnode) {while (Multiselectdomno                De.firstchild) {var node=multiselectdomnode.firstchild; multiselectdomnode.removechild (node);      }}//fromto. Select data from one drop-down box to move to another drop-down box function Removeandaddselect (from,to,frommulti,tomulti,frommemory,tomemory) {                index=0;              var fromitems=frommulti.value;//gets the node selected by the mouse (can be multiple nodes in the form of an array) for (Var fi in Fromitems) {              var id=fromitems[index];              var item=frommemory.get (ID);              Frommemory.remove (ID);              Tomemory.add (item);                index++;                                        } index=0; For (var item in frommemory.data) {var option = Win.doc.createElement (' option '); option.innerhtml=frommemory.data[index           ].name;option.value=frommemory.data[index].id; From.appendchild (option); Index + +;                            } index=0; For (var item in tomemory.data) {var option = Win.doc.createElement (' option '); Option.innerhtml=tomemory.data[index].           Name;option.value=tomemory.data[index].id;  To.appendchild (option); index++;               } removeallchildren (Frommulti.domnode);        Frommulti._fillcontent (from);                  Removeallchildren (Tomulti.domnode);            Tomulti._fillcontent (to);               }//fromconfigbutton, such as button event handler var Fromconfigbutton=dom.byid ("Fromconfigbutton"); On (Fromconfigbutton, "click", Function (evt) {Removeandaddselect (Fromconfig,toconfig,multifromconfig,mul                   Titoconfig,storefromconfig,storetoconfig);           });               var Toconfigbutton=dom.byid ("Toconfigbutton"); On (Toconfigbutton, "click", Function (evt) {Removeandaddselect (Toconfig,fromconfig,multitoconfig,multifromconfig,               Storetoconfig,storefromconfig);    }); 

Since multiselect cannot be directly associated with the store, it is necessary to write the DOM's JS code.

Dojo: How to implement a ListBox-style fromto function with MultiSelect