欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

测试模式对话框及div层的切换（特别适用于部门、岗位人员设置）

程序员文章站 2022-07-12 11:07:08
...

在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);
}

相关标签： J# JavaScript HTML 项目管理

上一篇： XML NEWBIE NOTE1 XML 

下一篇： XML NEWBIE NOTE1 XML 

推荐阅读