327 lines
11 KiB
JavaScript
327 lines
11 KiB
JavaScript
/*!
|
||
* 主 题：《院系员工树形》
|
||
* 说 明：用树形结构，展现院系下的员工；
|
||
* 功能描述：
|
||
* 1、院系树形展现，并直接显示其下属员工信息；
|
||
* 2、员工可以拖动，院系拖动后，等同拖动其下属所有员工。
|
||
*
|
||
* 作 者：宋雷鸣
|
||
* 开发时间: 2012年12月23日
|
||
*/
|
||
|
||
|
||
//修改数据的事件
|
||
//是否进入拖动
|
||
var isDrag = false;
|
||
|
||
|
||
|
||
//生成管理树
|
||
function Tree(area) {
|
||
if (area != null) Tree.Area = $(area);
|
||
if (Tree.InitNumber > 0) return;
|
||
//重新定义ico
|
||
for (var t in this.ico) {
|
||
this.ico[t] = "<img src=\"" + this.icoPath + this.ico[t] + "\" />";
|
||
}
|
||
Tree.InitNumber++;
|
||
}
|
||
//初始变量，每实例化一次，加一
|
||
Tree.InitNumber = 0;
|
||
//树形菜单所在区域
|
||
Tree.Area = "";
|
||
//树形菜单的根节点id;
|
||
Tree.RootId = 0;
|
||
//增加员工到角色的事件
|
||
Tree.onAddNode = null
|
||
//图标的路径
|
||
Tree.prototype.icoPath = "/Manage/Images/tree/";
|
||
//图标
|
||
Tree.prototype.ico = {
|
||
root: 'root.gif',
|
||
folder: 'folder.gif',
|
||
folderOpen: 'folderopen.gif',
|
||
page: 'page.gif',
|
||
empty: 'empty.gif',
|
||
line: 'line.gif',
|
||
join: 'join.gif',
|
||
joinBottom: 'joinbottom.gif',
|
||
plus: 'plus.gif',
|
||
plusBottom: 'plusbottom.gif',
|
||
minus: 'minus.gif',
|
||
minusBottom: 'minusbottom.gif',
|
||
nlPlus: 'nlPlus.gif',
|
||
nlMinus: 'nlMinus.gif',
|
||
add: 'add.gif',
|
||
reline: 'reline.gif'
|
||
};
|
||
//开始生成树形菜单
|
||
Tree.prototype.BuildMenu = function (data) {
|
||
//var rootHtml=BuildTree(data);
|
||
var rootHtml = this.buildItem(null, data);
|
||
Tree.Area.html(rootHtml);
|
||
//去除事件
|
||
$("body").unbind("mousedown");
|
||
$("body").unbind("mousemove");
|
||
$("body").unbind("mouseup");
|
||
//处理每个院系，最后一个员工的链接线
|
||
this.setLastEmpLink();
|
||
//赋加事件
|
||
this.TreeEvent();
|
||
this.DragEvent();
|
||
|
||
}
|
||
//生成菜单
|
||
//node:数据源的节点；
|
||
//data:完整的数据源，基于soap
|
||
Tree.prototype.buildItem = function (node, data) {
|
||
//当前节点对象
|
||
var n = new Node(node, data);
|
||
//开始生成
|
||
var temp = "<div style=\"float: none;width:100%\" type=\"nodePanel\" panelId=\"" + n.Id + "\">";
|
||
temp += "<div type=\"nodeline\" style=\"float: none;width:100%;display: table;\" >";
|
||
//节点前的图标区域//树的连线与图标
|
||
temp += "<div style='width:auto;float:left;' ";
|
||
temp += "type='nodeIco' ";
|
||
temp += "IsChilds='" + (n.IsChilds ? "True" : "False") + "'>";
|
||
temp += this.nodeLine(n, data) + this.nodeIco(n, data);
|
||
temp += "</div>";
|
||
//菜单项文本
|
||
temp += this.BuildNode(n, data);
|
||
temp += "</div>";
|
||
//当前院系的员工
|
||
var emplyee = $("#emplyee dd[depid=" + n.Id + "]");
|
||
for (var i = 0; i < emplyee.length; i++) {
|
||
var emp = emplyee.eq(i);
|
||
temp += "<div type=\"nodeline\" style=\"float: none;width:100%;display: table;\" >";
|
||
//节点前的图标区域//树的连线与图标
|
||
temp += "<div style='width:auto;float:left;' ";
|
||
temp += "type='nodeIco' >";
|
||
temp += this.empLine(n, data) + this.ico.page;
|
||
temp += "</div>";
|
||
temp += "<div style=\"width:auto;line-height: 18px;display: table; font-size: 12px;cursor: default;\"";
|
||
temp += " type='emplyee' nodeType='text'";
|
||
temp += " nodeEmpId='" + emp.attr("empid") + "' patId=\"" + emp.attr("depid") + "\" >";
|
||
temp += emp.text();
|
||
temp += "</div>";
|
||
temp += "</div>";
|
||
}
|
||
|
||
if (n.IsChilds) {
|
||
temp += "<div type='childPanel'>";
|
||
//temp+="<div type='childPanel' >";
|
||
for (var i = 0; i < n.Childs.length; i++) temp += this.buildItem(n.Childs[i], data);
|
||
temp += "</div>";
|
||
}
|
||
temp += "</div>";
|
||
return temp;
|
||
}
|
||
//生成节点项文本
|
||
Tree.prototype.BuildNode = function (node, data) {
|
||
var temp = "<div style=\"width:auto;line-height: 18px;display: table; font-weight: bold;font-size: 12px;cursor: default;\"";
|
||
temp += "title='" + node.Intro + "'";
|
||
temp += " nodeId='" + node.Id + "' text=\"" + node.Name + "\" type='depart' ";
|
||
temp += " tax='" + node.Tax + "' patId=\"" + node.PatId + "\" ";
|
||
temp += " nodeType='" + (node.Id == 0 ? "rootText" : "text") + "'>";
|
||
//菜单节点的自定义样式
|
||
var style = "";
|
||
//如果当前节点显示状态为false
|
||
//if(node.IsShow)
|
||
temp += "<span style=\"" + style + "\">" + node.Name + "</span>";
|
||
temp += "</div>";
|
||
return temp;
|
||
}
|
||
//生成菜单项前的第一个节点，即链接
|
||
//node:当前节点
|
||
Tree.prototype.nodeLine = function (node, data) {
|
||
var temp = "";
|
||
if (node.Id != 0) {
|
||
var p = new Node(node.Parent, data);
|
||
while (p.Id != 0) {
|
||
//如果是最后一个节点
|
||
if (p.IsLast) temp = this.ico.empty + temp;
|
||
else temp = this.ico.line + temp;
|
||
//当前节点的上级节点
|
||
p = new Node(p.Parent, data);
|
||
}
|
||
}
|
||
return temp;
|
||
}
|
||
//员工前面的线
|
||
Tree.prototype.empLine = function (node, data) {
|
||
var temp = "";
|
||
if (node.Id != 0) {
|
||
var p = new Node(node.Parent, data);
|
||
while (p.Id != 0) {
|
||
//如果是最后一个节点
|
||
if (p.IsLast) temp = this.ico.empty + temp;
|
||
else
|
||
temp = this.ico.line + temp;
|
||
//当前节点的上级节点
|
||
p = new Node(p.Parent, data);
|
||
}
|
||
}
|
||
//当前节点如果为最后一个节点，则增加空与连接符；否quot;
|
||
//该连线是在员工前面的
|
||
if (node.IsLast) temp += this.ico.empty + this.ico.join;
|
||
else
|
||
temp += this.ico.line + this.ico.join;
|
||
return temp;
|
||
}
|
||
//菜单项第二个子节点，用于显示加减号与菜单项图标
|
||
//n:当前节点
|
||
Tree.prototype.nodeIco = function (n, data) {
|
||
var temp = "";
|
||
//如果是顶级，则返回根图标
|
||
if (n.Id == 0) return this.ico.root;
|
||
//最后一个节点,且为打开状态
|
||
if (n.IsLast) temp += this.ico.minusBottom + this.ico.folderOpen;
|
||
//不是最后一个节点，状态为打开
|
||
if (!n.IsLast) temp += this.ico.minus + this.ico.folderOpen;
|
||
return temp;
|
||
}
|
||
//处理点前图片的替换效果
|
||
//element:节点的元素
|
||
//img1:原图片
|
||
//img2:新图片
|
||
Tree.prototype.tranImg = function (el, img1, img2) {
|
||
if (el.attr("src").indexOf(img1) > 0)
|
||
el.attr("src", el.attr("src").replace(img1, img2));
|
||
else
|
||
if (el.attr("src").indexOf(img2) > 0)
|
||
el.attr("src", el.attr("src").replace(img2, img1));
|
||
}
|
||
//设置当前院系，最后一个员工前面的链接线
|
||
Tree.prototype.setLastEmpLink = function () {
|
||
$("div[type='emplyee']").each(function () {
|
||
var tree = new Tree()
|
||
var p = $(this).parent();
|
||
//如果下一个节点不存在，则意味着当前节点是最后一个
|
||
if (p.next().length < 1) {
|
||
var img = p.find("div:first-child").find("img:last-child").prev();
|
||
tree.tranImg(img, "join.gif", "joinBottom.gif");
|
||
}
|
||
});
|
||
}
|
||
//树形菜单事件，如打开折叠等
|
||
Tree.prototype.TreeEvent = function () {
|
||
var tree = new Tree();
|
||
//当点击节点前的图标时，如加减号文件夹图标
|
||
$("div[nodeType='text']").prev("div[IsChilds='True']").click(function () {
|
||
//栏目图标，文件夹或文件图标
|
||
var last = $(this).find("img:last");
|
||
//节点图标，加号或┝号
|
||
var pre = last.prev();
|
||
tree.tranImg(pre, "plus.gif", "minus.gif");
|
||
tree.tranImg(pre, "minusbottom.gif", "plusbottom.gif");
|
||
tree.tranImg(last, "folderopen.gif", "folder.gif");
|
||
$(this).parent().next().slideToggle();
|
||
var state = $(this).attr("state");
|
||
$(this).attr("state", state == "true" ? "false" : "true");
|
||
});
|
||
//节点文本双击事件，展开与折叠
|
||
$("div[nodeType='text']").dblclick(function () {
|
||
//其实就是，当前节点前面图标的事件
|
||
$(this).prev("div[IsChilds='True']").click();
|
||
});
|
||
}
|
||
//拖动事件
|
||
Tree.prototype.DragEvent = function () {
|
||
//当鼠标点击节点时
|
||
$("body").mousedown(function (e) {
|
||
//鼠标点击的当前菜单节点
|
||
var curr = Tree.getDragObj(e);
|
||
if (curr == null) return;
|
||
//设置点击的焦点
|
||
$("div[nodeType='text']").css("background-color", "transparent");
|
||
curr.css("background-color", "#eeeeee");
|
||
//生成可以拖动的节点，其实是复制点中的“焦点”
|
||
var div = Tree.buildDragDiv(curr);
|
||
div.hide();
|
||
})
|
||
//当鼠标移动时
|
||
$("body").mousemove(function (e) {
|
||
//清除原有鼠标事件效果
|
||
addIco(null, false);
|
||
var div = $("#NodeDragDiv");
|
||
if (div.length < 1) return;
|
||
div.show();
|
||
//进入拖动状态
|
||
isDrag = true;
|
||
//拖动对象，跟随鼠标
|
||
var mouse = $().Mouse(e);
|
||
div.css("top", mouse.y).css("left", mouse.x);
|
||
//判断员工是否在角色区域，如果是，则显示增加箭头
|
||
var isTree = $().isMouseArea($("#EmplyeeList"), e);
|
||
if (isTree) addIco(div, true);
|
||
})
|
||
//当鼠标松开点击事件时
|
||
$("body").mouseup(function (e) {
|
||
if (isDrag) {
|
||
var div = $("#NodeDragDiv");
|
||
var tax = Number(div.attr("tax"));
|
||
var pid = Number(div.attr("patId"));
|
||
var oldtax = Number(div.attr("oldTax"));
|
||
var oldPid = Number(div.attr("oldPatId"));
|
||
var oldNodeId = Number(div.attr("nodeId"));
|
||
var isTree = $().isMouseArea($("#EmplyeeList"), e);
|
||
if (isTree) Tree.onAddNode();
|
||
}
|
||
addIco(null, false);
|
||
//清除拖动对象
|
||
$("#NodeDragDiv").remove();
|
||
isDrag = false;
|
||
})
|
||
}
|
||
//生成要拖动的节点
|
||
Tree.buildDragDiv = function (curr) {
|
||
var div = $("#NodeDragDiv");
|
||
if (div.length < 1) {
|
||
$("body").append("<div id=\"NodeDragDiv\"></div>");
|
||
div = $("#NodeDragDiv");
|
||
}
|
||
div.html(curr.text());
|
||
div.attr("text", curr.text());
|
||
div.attr("nodeEmpId", curr.attr("nodeEmpId"));
|
||
div.attr("patId", curr.attr("patId"));
|
||
div.attr("type", curr.attr("type"));
|
||
div.attr("nodeEmpId", curr.attr("nodeEmpId"));
|
||
div.attr("nodeId", curr.attr("nodeId"));
|
||
div.css({ "position": "absolute", "z-index": "1000", "width": "auto", "height": "auto",
|
||
"border": "1px dashed #FFCC66", "background-color": "#ffffff"
|
||
});
|
||
return div;
|
||
}
|
||
//获取当前坐标下的节点
|
||
//return:返回树形节点的页面元素
|
||
Tree.getDragObj = function (e) {
|
||
var mouse = $().Mouse(e);
|
||
var x = mouse.x;
|
||
var y = mouse.y
|
||
var tmp = null;
|
||
$("div[nodeType='text']").each(function () {
|
||
var offset = $(this).offset();
|
||
var xt = x > offset.left && x < (offset.left + $(this).width());
|
||
var yt = y > offset.top && y < (offset.top + $(this).height());
|
||
if (xt && yt && $(this).attr("state") != "lock") tmp = $(this);
|
||
});
|
||
return tmp;
|
||
}
|
||
//添加添头图标
|
||
function addIco(current, isShow) {
|
||
var ico = $("#TreeaddIco");
|
||
if (ico.length < 1) {
|
||
$("body").append("<div id=\"TreeaddIco\"></div>");
|
||
ico = $("#TreeaddIco");
|
||
}
|
||
ico.css("position", "absolute").css("z-index", "2000");
|
||
ico.css("width", 13).css("height", 10);
|
||
ico.css("background-image", "url(../Images/arrow1.gif)");
|
||
if (current != null) {
|
||
var offset = current.offset();
|
||
ico.css("top", offset.top + current.height() - ico.height() / 3);
|
||
ico.css("left", offset.left + current.width() - ico.width() / 3);
|
||
}
|
||
isShow ? ico.show() : ico.hide();
|
||
}
|