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

Source: Internet
Author: User

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

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.