- 浏览: 314716 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
hdwmp123：
GGGGeek 写道HTMLLayout布局的邮件被QQ邮箱拒 ...
logback配置错误邮件发送 -
GGGGeek：
HTMLLayout布局的邮件被QQ邮箱拒收了，代理服务用的是 ...
logback配置错误邮件发送 -
Inmethetiger：
在windows下面用;分隔，linux下面用:分隔。 在 ...
【转】程序包com.sun.image.codec.jpeg不存在 问题的完美解决 -
wuxiaozeng2440：
感动了，谢谢
这世界上你最在乎的人 -
ahong520：
很重要的一点，安装完xcode后还需要到xcode prefe ...
MAC下配置Eclipse Java/C++ 开发环境
在OA系统中做部门、岗位管理的时候，通常有这么一个需求：设置人员列表，而且要求提供几种不同的方式来设置人员，例如：可以在所有人员中选择、可以通过部门选择人员、还可以通过岗位选择人员等等。
如何实现呢？可以通过弹出一个模态对话框的方式来实现（主要有3个文件，一个js文件，2个html页面）
1、设置人员主页面代码（testDialog.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试模式对话框</title>
<script language="JavaScript">
function $()
{
return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
}
function initUsers()
{
if ($('userArray').value == "")
{
$('userNameArray').value = "";
}
var obj = new Object();
// 将已有的值传递过去
obj.name = $('userArray').value+","+$('userNameArray').value;
var result = window.showModalDialog('selectUsersDialog.html',obj,'dialogHeight:400px;dialogWidth:700px;dialogLeft:300;dialogTop:180;');
if(result == null)
{
return;
}
var userList="", userNameList="";
var len = result.length;
for (var i=0; i<len; i++)
{
var item = result[i].split("|");
if (i > 0)
{
userList += ",";
userNameList += ",";
}
userList += item[0];
userNameList += item[1];
}
$('userArray').value = userList;
$('userNameArray').value = userNameList;
}
</script>
</head>
<body>
<center><h3>测试模式对话框及div层的切换</h3></center>
<p></p><br/>
<table border="1" align="center" width="100%">
<tr>
<td align="right">设置人员</td>
<td align="left">
<input type="hidden" name="userArray" id="userArray" value="">
<textarea rows="4" cols="40" name="userNameArray" id="userNameArray" readonly="readonly">请选择人员。
</textarea>
<input type="button" value="设置人员" onclick="initUsers();" >
</td>
</tr>
</table>
</body>
</html>
2、人员选择模态窗口页面代码（selectUsersDialog.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>人员选择</title>
<!-- 导入js文件 -->
<script language="JavaScript" src="js/testDialog.js"></script>
</head>
<body>
<form action="" name="testForm" method="post">
<table width="80%" border="1" align="center">
<tr>
<td height="30" colspan="3" align="right">
<input type="button" onclick="SetValue();" name="confirm" value=" 确 认 " />
<input type="button" onclick="shutwin();" name="cancel" value=" 取 消 " />
</td>
</tr>
<tr>
<!-- 待选项目 -->
<td width="35%" align="center">
<div onclick="showContent(this.nextSibling, document.getElementById('selectUsers'))">
所有人员列表
</div>
<div lang="content">
<select name="selectUsers" size="15" id="selectUsers" multiple="multiple" style="width: 269px">
<option value="U001">钱一</option>
<option value="U002">孙二</option>
<option value="U003">张三</option>
<option value="U004">李四</option>
<option value="U005">王五</option>
<option value="U006">赵六</option>
</select>
</div>
<div onclick="showContent(this.nextSibling, document.getElementById('selectDepts'))">
选择部门
</div>
<div style="display: none" lang="content">
<select name="selectDepts" size="15" id="selectDepts" multiple="multiple" style="width: 269px">
<option value="DEPT_D001">财务部</option>
<option value="DEPT_D002">行政部</option>
<option value="DEPT_D003">销售部</option>
</select>
</div>
<div onclick="showContent(this.nextSibling, document.getElementById('DeptOfUsers'))">
按部门选择人员
</div>
<div style="display: none" lang="content">
<select name="selectUserFromDept" id="allJob" onchange="changeDept(this);" style="width: 269px">
<option value="">请选择部门</option>
<option value="D001">财务部</option>
<option value="D002">行政部</option>
<option value="D003">销售部</option>
</select>
<select name="DeptOfUsers" size="15" multiple="multiple" id="DeptOfUsers" style="width: 269px">
</select>
</div>
<div onclick="showContent(this.nextSibling, document.getElementById('JobOfUsers'))">
按岗位选择人员
</div>
<div style="display: none" lang="content">
<select name="selectUserFromJob" id="allJob" onchange="changeJob(this);" style="width: 269px">
<option value="">请选择岗位</option>
<option value="J001">财务经理</option>
<option value="J002">人事经理</option>
<option value="J003">销售经理</option>
</select>
<select name="JobOfUsers" size="15" multiple="multiple" id="JobOfUsers" style="width: 269px">
</select>
</div>
</td>
<!-- 功能菜单 -->
<td width="10%" align="center" valign="middle">
<table width="100%" border="1">
<tr>
<td align="center">
<input type="button" name="Button" value=" 添 加 " onClick="DoAdd()" style="width: 80px" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="Submit" value=" 移 除 " onClick="DoDel()" style="width: 80px" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="Submit3" value="添加全部" onClick="DoAddAll()" style="width: 80px" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="Submit2" value="移除全部" onClick="DoDelAll()" style="width: 80px" />
</td>
</tr>
</table>
</td>
<!-- 已选择项目 -->
<td width="35%" align="center">
<select name="savedUsers" size="15" multiple id="savedUsers" style="width: 269px">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
3、js代码（testDialog.js）
function $()
{
return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
}
var AllUsersSel = null; // 待选择的用户列表
var AllDeptsSel = null; // 待选择的部门列表
var DeptOfUsersSel = null; // 待选择的部门人员列表
var JobOfUsersSel = null; // 待选择的岗位人员列表
var SavedUsersSel = null; // 已选择的用户列表
function removeAll(obj)
{
/*var len = obj.options.length;
for (var i=0; i<len; i++)
{
obj.options.remove(0);
}*/
obj.options.length=0;
}
function changeDept(dept)
{
//alert(dept.value);
var deptUsers = $("DeptOfUsers");
removeAll(deptUsers);
// new Option('text', 'value');
if (dept.value == 'D001')
{
deptUsers.options.add(new Option('钱一', 'U001'));
deptUsers.options.add(new Option('孙二', 'U002'));
}
else if (dept.value == 'D002')
{
deptUsers.options.add(new Option('张三', 'U003'));
deptUsers.options.add(new Option('李四', 'U004'));
}
else if (dept.value == 'D003')
{
deptUsers.options.add(new Option('王五', 'U005'));
deptUsers.options.add(new Option('赵六', 'U006'));
}
sort_Main(SavedUsersSel);
}
function changeJob(job)
{
//alert(job.value);
var jobUsers = $("JobOfUsers");
removeAll(jobUsers);
// new Option('text', 'value');
if (job.value == 'J001')
{
jobUsers.options.add(new Option('张三', 'U003'));
jobUsers.options.add(new Option('李四', 'U004'));
}
else if (job.value == 'J002')
{
jobUsers.options.add(new Option('王五', 'U005'));
jobUsers.options.add(new Option('赵六', 'U006'));
}
else if (job.value == 'J003')
{
jobUsers.options.add(new Option('钱一', 'U001'));
jobUsers.options.add(new Option('孙二', 'U002'));
}
sort_Main(SavedUsersSel);
}
// 关闭
function shutwin()
{
window.close();
return;
}
// 保存
function SetValue()
{
// 将选择的值保存到数组中
var obj = new Array();
var len = SavedUsersSel.length;
for(var i=0; i<len; i++)
{
var item = SavedUsersSel.options[i];
obj.push(item.value+"|"+item.text);
}
window.returnValue = obj;
window.close();
}
window.onload=function()
{
AllUsersSel = $("selectUsers");
AllDeptsSel = $("selectDepts");
DeptOfUsersSel = $("DeptOfUsers");
JobOfUsersSel = $("JobOfUsers");
SavedUsersSel = $("savedUsers");
//从父窗口中获得传过来的值
var obj = window.dialogArguments;
var strs = obj.name;
//alert(strs);
//如果传过来的值为空或为","，则不采取操作
if(strs == "," || strs == "")
{
return;
}
else //分解传过来的值，然后加入到右边的select中的option中
{
var value = strs.split(",");
var len = value.length/2; // 传递的值是对称的
var tempLen;
for(var i=0; i<len; i++)
{
//将从父窗口中传过来的值显示在模态窗口的右边的select中。
SavedUsersSel.options.add(new Option(value[i+len], value[i]));
}// end-for-value
sort_Main(SavedUsersSel);
}// end-for-if
}
//全部添加到窗口的右边（此时的AllUsersSel，不一定是所有人员，而是当前展示的层）
function DoAddAll()
{
var len = AllUsersSel.length;
for(var i=0; i<len; i++)
{
var selectItem = AllUsersSel.options[i];
// appendChild()方法会影响到元素所属集合，即将原所属集合元素转移到现有集合中（不是拷贝）
SavedUsersSel.appendChild(selectItem);
len--;
i--;
}
//sort_Main(SavedUsersSel);
}
//全部移除到窗口的左边（此时的AllUsersSel，不一定是所有人员，而是当前展示的层）
function DoDelAll()
{
var len = SavedUsersSel.length;
for(var i=0; i<len; i++)
{
var selectItem = SavedUsersSel.options[i];
// appendChild()方法会影响到元素所属集合，即将原所属集合元素转移到现有集合中（不是拷贝）
AllUsersSel.appendChild(selectItem);
len--;
i--;
}
//sort_Main(SavedUsersSel);
}
//添加函数，将数据添加到窗口的右边（此时的AllUsersSel，不一定是所有人员，而是当前展示的层）
function DoAdd()
{
var this_sel = null;
var len1 = AllUsersSel.length;
for(var i=0; i<len1; i++)
{
this_sel = AllUsersSel.options[i];
if(this_sel.selected)
{
// 查看所有已选择的是否已经存在（如果存在则说明js功能异常了）
var len2 = SavedUsersSel.length;
var flag = false;
for(var j=0; j<len2; j++)
{
if(SavedUsersSel[j].value == this_sel.value)
{
flag = true;
break;
}
}
if (flag)
{
alert("js出现异常，要添加的选项已经存在！");
break;
}
// appendChild()方法会影响到元素所属集合，即将原所属集合元素转移到现有集合中（不是拷贝）
SavedUsersSel.appendChild(this_sel);
len1--;
i--;
}
}
//sort_Main(SavedUsersSel);
}
//移除函数，将数据移除到窗口的左边（此时的AllUsersSel，不一定是所有人员，而是当前展示的层）
function DoDel()
{
var this_sel = null;
var len1 = SavedUsersSel.length;
for(var i=0; i<len1; i++)
{
this_sel = SavedUsersSel.options[i];
if(this_sel.selected)
{
// 查看待选择的是否已经存在（如果存在则说明js功能异常了）
var len2 = AllUsersSel.length;
var flag = false;
for(var j=0; j<len2; j++)
{
if(AllUsersSel[j].value == this_sel.value)
{
flag = true;
break;
}
}
if (flag)
{
alert("js出现异常，要移除的选项在待选项中已经存在！");
break;
}
// appendChild()方法会影响到元素所属集合，即将原所属集合元素转移到现有集合中（不是拷贝）
AllUsersSel.appendChild(this_sel);
len1--;
i--;
}
}
//sort_Main(SavedUsersSel);
}
//选择函数，选择数据。
function sort_Main(the_saved_Sel)
{
/******** 如果检测到窗口左边的数据，右边已经存在了，则把窗口左边的数据进行移除掉。********/
var len = the_saved_Sel.length;
var tempLen, curValue;
for (var i=0; i<len; i++)
{
curValue = the_saved_Sel[i].value;
//移除所有人员中的数据
tempLen = AllUsersSel.length;
for(var j=0; j<tempLen; j++)
{
if(curValue == AllUsersSel[j].value)
{
AllUsersSel.options.remove(j);
break;
}
}
//移除所有部门中的数据
tempLen = AllDeptsSel.length;
for(var j=0; j<tempLen; j++)
{
if(curValue == AllDeptsSel[j].value)
{
AllDeptsSel.options.remove(j);
break;
}
}
//移除选中部门对应的所有人员中的数据
tempLen = DeptOfUsersSel.length;
for(var j=0; j<tempLen; j++)
{
if(curValue == DeptOfUsersSel[j].value)
{
DeptOfUsersSel.options.remove(j);
break;
}
}
//移除选中岗位对应的所有人员中的数据
tempLen = JobOfUsersSel.length;
for(var j=0; j<tempLen; j++)
{
if(curValue == JobOfUsersSel[j].value)
{
JobOfUsersSel.options.remove(j);
break;
}
}
}// end-for-the_saved_Sel
}
//div隐藏显示功能
function showContent(e, v_select)
{
// 隐藏所有div，条件是lang属性值为content
var divs = document.getElementsByTagName("div");
var len = divs.length;
for(var i=0; i<len; i++)
{
if(divs[i].lang=="content")
divs[i].style.display="none";
}
//显示当前传递进来的div数据
e.style.display="block";
// 获取当前div下的select选项值
AllUsersSel = $(v_select.id);
}
发表评论
-
【转】HTTP状态码
2014-03-18 14:41 671http://blog.csdn.net/teamlet/ar ... -
html页面内容自动换行显示
2013-03-25 11:32 1178style="word-break:break-al ... -
js编码转码中文
2013-03-25 11:29 3315javascript汉字编码与转码： <!DOCT ... -
标准对联广告Js代码
2012-07-30 17:09 1249标准对联广告Js代码 用于门户网站两侧的“对联广告” &l ... -
【转】Fastjson介绍
2012-06-27 16:23 3196转载自：http://code.alibabatech.co ... -
【转】Java获取真实IP地址
2012-05-22 16:55 919request.getRemoteAddr()这种 ... -
【转】js 数字验证 火狐 文本框获得焦点 文本框处于选中状态
2012-04-12 18:15 1284http://chengxuyuanbiji.blog.163 ... -
Java 发送GET、POST请求（模拟浏览器操作）
2011-08-03 15:48 13156java模拟浏览器操作,一般有五个步骤： 1、创建连接； ... -
常用javascript函数
2011-07-14 15:21 997// 复选框全选触发函数，选中所有子选项 fu ... -
javascript屏蔽鼠标右键（IE）
2011-07-14 15:04 1093<body oncontextmenu= " ... -
Struts文件上传
2011-06-28 17:41 1003一、Struts文件上传 1. JSP页面(必须采用PO ... -
Javascript中最常用的25个经典技巧
2009-11-07 00:13 8271. 将彻底屏蔽鼠标右键 ... -
Servlet的基础概念 监听器 过滤器等【转】
2010-10-29 23:31 1087Servlet的基础概念 1. Ser ... -
Servlet的Filter过滤器（四种过滤方式）【转】
2010-10-29 23:41 1316一、概述 过滤器是请求和响应之间的一种WEB组件 ... -
使用struts同步令牌机制避免表单的重复提交
2010-10-30 01:18 985一、使用方法 1、假设你要提交的叶面为usermesg.j ...
相关推荐
模式对话框(可刷新) 可移动div 遮罩层
漂亮的模式对话框 找了好久 于大家分享 ！！！！！！！！！！
div弹出对话框div弹出对话框div弹出对话框div弹出对话框div弹出对话框div弹出对话框div弹出对话框div弹出对话框
NULL 博文链接：https://solodu.iteye.com/blog/574911
纯js（javascript） 弹出层 对话框 弹出层，可以有半透明遮挡层。 div 模拟系统对话框，Alert Confirm Prompt
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框，JS源代码
在同一页面跳出对话框。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
Javascript实现div对话框效果
3种方式，完美DIV层切换,靠原理，可以制作出更加完美的DIV层界面！
Div模拟对话框 <br>Div模拟对话框
兼容：IE6+、Firefox、Chrome、Safari、Opera
js控制div左右切换带左右箭头
JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口(对话框)控件 js javascript 对话框
用javascript css div实现弹出模态对话框，盖住下面的部分，上面的透明度改变
jqurry弹出div对话框.rar jqurry弹出div对话框.rar jqurry弹出div对话框.rar
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
js+div 超酷模态对话框[带提示声音]
div模式窗口div模式窗口div模式窗口
div+js实现的弹出对话框，调用简单，可拖动，父页面禁止并半透明。弹出框可内嵌功能页面，也可去掉“iframe”然后做成单纯的对话框。 在windowsXP sp2下的 IE8、firefox3.5、opera10、傲游、TT浏览器、搜狗浏览器、...