在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="设置人员" οnclick="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" οnclick="SetValue();" name="confirm" value=" 确 认 " />
<input type="button" οnclick="shutwin();" name="cancel" value=" 取 消 " />
</td>
</tr>
<tr>
<!-- 待选项目 -->
<td width="35%" align="center">
<div οnclick="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 οnclick="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 οnclick="showContent(this.nextSibling, document.getElementById('DeptOfUsers'))">
按部门选择人员
</div>
<div style="display: none" lang="content">
<select name="selectUserFromDept" id="allJob" οnchange="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 οnclick="showContent(this.nextSibling, document.getElementById('JobOfUsers'))">
按岗位选择人员
</div>
<div style="display: none" lang="content">
<select name="selectUserFromJob" id="allJob" οnchange="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.οnlοad=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);
}
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
