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

superich2008

浏览: 323247 次
性别:
来自: 深圳

最近访客更多访客>>

arpenker

abroadfire

ydsakyclguozi

jsczxy2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

J#JavaScript HTML 项目管理

在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 = "";
}

<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>

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

分享到：

关于正则表达式匹配任意字符（包括换行符） ... | 地区经纬度信息获取（利用Google地图API获 ...

2010-09-08 17:52
浏览 1263
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论