标签：
欲实现的功能如下图：
主要要解决的问题包括两个方面：
一个是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代码。
dojo：如何用MultiSelect实现类似ListBox风格的FromTo功能
标签：
原文地址：http://www.cnblogs.com/qq552048250/p/4654120.html
