欲实现的功能如下图:

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

一个是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功能的更多相关文章

  1. dojo:如何显示ListBox风格的选择框

    常见的选择框控件:Selelct.FilteringSelect和ComboBox都是下拉框风格,而不是ListBox风格. dojo还提供了一个dijit.form.MultiSelect控件可以解 ...

  2. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  3. 请教如何用 peewee 实现类似 django ORM 的这种查询效果。

    本人新入坑的小白,如有不对的地方请包涵~~~! 在 django 中代码如下:模型定义: class Friends(models.Model): first_id = models.IntegerF ...

  4. js 实现类似php函数number_format的功能

    今天同事在做一个功能的时候需要使用js来实现类似php函数number_format的功能,最后就有了下面的方法,可以实现了: /** * number_format * @param number ...

  5. SharePoint 2010 类似人人网站内信功能实施

    简介:用SharePoint代码加实施的方式,完成类似人人网站内信功能,当然,实现的比较简单,样式也比较难看,只为给大家一个实施的简单思路,如有谬误,还请见谅.当然,还有就是截图比较长,当然为了让大家 ...

  6. MVC实现类似QQ的网页聊天功能-ajax(下)

    此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一 ...

  7. springmvc+ztree v3实现类似表单回显功能

    在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...

  8. WPF MultiSelect模式下ListBox 实现多个ListBoxItem拖拽

    WPF 的ListBox不支持很多常见的用户习惯,如在Explorer中用鼠标可以选择多项Item,并且点击已经选择的Item,按住鼠标左键可以将所有已选择Item拖拽到指定的位置.本文简单的实现了这 ...

  9. 如何用tomcat实现类似weblogic那样的热部署方式

    平时weblogic部署程序包时一般是到控制台去部署,不需要重启. 相反之前用tomcat部署应用时,我一般都是把tomcat重启来完成程序包的更新或新包部署.但是这次要部署的应用有点多,大概10几个 ...

随机推荐

  1. encodeURI和encodeURIComponent区别

    参考:https://www.jianshu.com/p/075f5567c9a1 这两个函数功能上面比较接近,但是有一些区别. encodeURI:不会进行编码的字符有82个 :!,#,$,& ...

  2. 微软Power BI 每月功能更新系列——10月Power BI 新功能学习

    Power BI Desktop10月产品功能摘要 本月Power Plus Desktop的更新充满了整个产品的小型和大型改进.一个巨大的更新是Power BI服务支持我们的复合模型和聚合预览.这实 ...

  3. undefined is not an object (evaluating '_react2.PropTypes.string')

    对所引用的组件原 .import React, {Component,PropTypes} from 'react' 改成:import React, {Component} from 'react' ...

  4. html 调用ocx控件

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

  5. Ubuntu 12.04不能在華碩F81se系列電腦上安裝解决辦法

    本人華碩F81se系列的電腦,剛開始是裝的ubuntu 10.04的系統,周末閑的無聊,就想把系統換成ubuntu 12.04的,從ubuntu官網上下載了12.04的安裝包,下了個usb insta ...

  6. .npy,.mat,.txt转换

    .npy--->.txt:    http://blog.csdn.net/wgf5845201314/article/details/73825785 .npy<->.mat: i ...

  7. pdb的数量限制

    Decide How to Configure the CDB --搜索文档 Prepare to create the CDB by research and careful planning. T ...

  8. unity中实现简单对象池,附教程原理

    Unity对象池的创建与使用 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  9. 【转】【计算机视觉】opencv靶标相机姿态解算2 根据四个特征点估计相机姿态 及 实时位姿估计与三维重建相机姿态

    https://blog.csdn.net/kyjl888/article/details/71305149

  10. 2019寒假算法基础集训营1 - B 小a与"204"

    题目: 小a非常喜欢这个数字,因为. 现在他有一个长度为的序列,其中只含有这三种数字 设为序列中第个数,你需要重新排列这个数列,使得最大(公式的含义是:每个数与前一个数差的平方的和) 注意:我们默认 ...