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几个 ...
随机推荐
- requery.js使用姿势
最近在看requerjs,现在来总结下自己的收获,有不对的地方,望大家指正! 1.首先介绍下requirejs,引用中文官网http://www.requirejs.cn的一句话,requirejs是 ...
- django面试五
http和https的区别https协议需要到ca申请证书,一般免费证书很少,需要交费. 注:CA - certificate authority,身份认证,权威机构认证,CA认证: http是超文本 ...
- 分类算法的R语言实现案例
最近在读<R语言与网站分析>,书中对分类.聚类算法的讲解通俗易懂,和数据挖掘理论一起看的话,有很好的参照效果. 然而,这么好的讲解,作者居然没提供对应的数据集.手痒之余,我自己动手整理了一 ...
- scrapy框架发送post请求
注:scrapy框架默认发送get请求 1.想要发送post请求,那么推荐使用‘scrapy.FormRequest’方法.可以方便的制定表单数据.request = scrapy.FormReque ...
- LeetCode--1、26、27、35、53 Array(Easy)
1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to ...
- 【Python】利用正则解析xml练习题
{ "date": "18-03-29 06:04:47", "data": { "deviceType": 1, &q ...
- maven导出项目依赖的jar包
摘要: 在进行项目部署时,需要将maven项目所依赖的jar导出到指定目录,本文讲解如何导出项目依赖的jar包 一.导出到默认目录 targed/dependency 从Maven项目中导出项目依赖的 ...
- C++ STL 数据结构与算法 —— 排序
1. Top k 大的数 排序后直接索引输出:O(nlogn)" role="presentation">O(nlogn)O(nlogn) std::sort( ...
- Android Native Hook技术(一)
原理分析 ADBI是一个著名的安卓平台hook框架,基于 动态库注入 与 inline hook 技术实现.该框架主要由2个模块构成:1)hijack负责将so注入到目标进程空间,2)libbase是 ...
- 【c++基础】static修饰的函数作用与意义
static修饰的函数作用与意义 static修饰的函数叫做静态函数,静态函数有两种,根据其出现的地方来分类: 如果这个静态函数出现在类里,那么它是一个静态成员函数: 静态成员函数的作用在于:调用这个 ...