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代码。
dojo:如何用MultiSelect实现类似ListBox风格的FromTo功能的更多相关文章
- dojo:如何显示ListBox风格的选择框
常见的选择框控件:Selelct.FilteringSelect和ComboBox都是下拉框风格,而不是ListBox风格. dojo还提供了一个dijit.form.MultiSelect控件可以解 ...
- bootstrap风格的multiselect插件——类似邮箱收件人样式
在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...
- 请教如何用 peewee 实现类似 django ORM 的这种查询效果。
本人新入坑的小白,如有不对的地方请包涵~~~! 在 django 中代码如下:模型定义: class Friends(models.Model): first_id = models.IntegerF ...
- js 实现类似php函数number_format的功能
今天同事在做一个功能的时候需要使用js来实现类似php函数number_format的功能,最后就有了下面的方法,可以实现了: /** * number_format * @param number ...
- SharePoint 2010 类似人人网站内信功能实施
简介:用SharePoint代码加实施的方式,完成类似人人网站内信功能,当然,实现的比较简单,样式也比较难看,只为给大家一个实施的简单思路,如有谬误,还请见谅.当然,还有就是截图比较长,当然为了让大家 ...
- MVC实现类似QQ的网页聊天功能-ajax(下)
此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一 ...
- springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
- WPF MultiSelect模式下ListBox 实现多个ListBoxItem拖拽
WPF 的ListBox不支持很多常见的用户习惯,如在Explorer中用鼠标可以选择多项Item,并且点击已经选择的Item,按住鼠标左键可以将所有已选择Item拖拽到指定的位置.本文简单的实现了这 ...
- 如何用tomcat实现类似weblogic那样的热部署方式
平时weblogic部署程序包时一般是到控制台去部署,不需要重启. 相反之前用tomcat部署应用时,我一般都是把tomcat重启来完成程序包的更新或新包部署.但是这次要部署的应用有点多,大概10几个 ...
随机推荐
- C++ SUBLIME TEXT3 环境配置
一.第一种方法 1.New Build System,设置C++.sublime-build编译文件 { "path": "E:\\MinGW\\bin", & ...
- CentOS7+Nginx配置Tomcat负载均衡环境
1.准备两个Tomcat 配置两个Tomcat一个端口是8080另外一个端口是8081,分别在webapps下面添加一个测试用的web项目,修改index.jsp文件,8080端口的index.jsp ...
- 转:openwrt 框架分析
本文是本人对OpenWrt的Makefile的理解,并非转载.OpenWrt是一个典型的嵌入式Linux工程,了解OpenWrt的Makefile的工作过程对提高嵌入式Linux工程的开发能力有极其重 ...
- asp.net mvc webapi 实用的接口加密方法(转载)
在很多项目中,因为webapi是对外开放的,这个时候,我们就要得考虑接口交换数据的安全性. 安全机制也比较多,如andriod与webapi 交换数据的时候,可以走双向证书方法,但是开发成本比较大, ...
- idea 中新建Servlet
本文转载自 :itellij idea创建javaWeb以及Servlet简单实现 一.创建并设置javaweb工程 1.创建javaweb工程File --> New --> Proj ...
- mAP的计算
参加郑良博士的代码: mars_evaluation 其中ap这样算: ap = ap + (recall - old_recall)*((old_precision+precision)/2); ...
- Java中的数组初探
1.数组的类型? Java中的数组为引用类型. 2.数组的三种初始化方式 1. int[] arr1=new int[] {1,2,3,4,}; 2. int[] arr2= {1,2,3,4,}; ...
- textarea去掉右下三角号
/*去掉textarea右下角三角符号*/ resize : none; 修改样式直接覆盖就行,会把默认样式覆盖掉.如border,width,height,border-radius
- 简单说明 Virtual DOM 为啥快
Virtual DOM 就是用 JS 的对象来描述 DOM 结构的一个 DOM 树.如: var element = { tagName: 'ul', // 节点标签名 props: { // DOM ...
- LeetCode - Cut Off Trees for Golf Event
You are asked to cut off trees in a forest for a golf event. The forest is represented as a non-nega ...