dojo：如何用MultiSelect实现类似ListBox风格的FromTo功能

欲实现的功能如下图：

 

主要要解决的问题包括两个方面：

一个是MultiSelet初始化的工作，一个是FromTo功能按钮的实现。这主要是因为MultiSelect控件是存储无关的，并不像Select或者Combobox那样好用。

下面简单说下流程：

step1： HTML部分

					<table align="center">
						<tr>
							<td >
								<fieldset>
									<legend><font color="red"><b>配置管理</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>
							</td>
							
							<td >
								<fieldset>
									<legend><font color="red"><b>人员管理</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>
							<td >
								<fieldset>
									<legend><font color="red"><b>供应管理</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></td>
											</tr>											
										</table>
								</fieldset>
							</td>
							
							<td >
								<fieldset>
									<legend><font color="red"><b>维修管理</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初始化（以配置管理为例），其中下拉框的数据是从服务器端请求获得

	    	//配置管理下拉框
	    	var fromConfig,multiFromConfig;
	    	var storeFromConfig;
			request.get("roleInputGetJsonAction.action?mode=query&roleInput.fromSelect=config",{handleAs : "json"})//向服务器查询对应于WBS的设备名
				   .then(function(data){					   
					   storeFromConfig=new Memory({ data: data });
			            // 创建配置管理的下拉框			            
						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 ： 按钮事件的处理程序

 //删除Select所有子节点的函数，多个按钮都会用到
            function removeAllChildren(multiSelectDomNode){
            	while (multiSelectDomNode.firstChild) {
						 var node=multiSelectDomNode.firstChild;
						 multiSelectDomNode.removeChild(node);					           
					     }
   		 	}
   		 	
   		 	//FromTo.从一个下拉框中选择数据移动到另一个下拉框
   		 	function removeAndAddSelect(from,to,fromMulti,toMulti,fromMemory,toMemory){
   		 	 	index=0;
                var fromItems=fromMulti.value;//获取鼠标选中的节点（可以是多个节点，以数组的形式）
                
                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等按钮的事件处理程序
            var fromConfigButton=dom.byId("fromConfigButton");   		 	
           	on(fromConfigButton, "click", function(evt){
           									removeAndAddSelect(fromConfig,toConfig,multiFromConfig,multiToConfig,storeFromConfig,storeToConfig);   						 	  
          	 							  });
           	var toConfigButton=dom.byId("toConfigButton");   		 	
           	on(toConfigButton, "click", function(evt){
           									removeAndAddSelect(toConfig,fromConfig,multiToConfig,multiFromConfig,storeToConfig,storeFromConfig);   						 	  
          	 							  });

　　由于MultiSelect无法直接和store关联，所以必须要写DOM的JS代码。

转载于:https://www.cnblogs.com/qq552048250/p/4654120.html