<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画</title>
<meta name="Author" content="ost.sj">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<script src="jquery-1.9.1.min.js"></script>
<script>
var json = [{
"deptName": "深圳XXX有限公司",
"businessUnit": "CM002",
"deptId": "1000021",
"childNodes": [{
"deptId": "1000023",
"deptName": "操作部",
"businessUnit": "操作部",
"childNodes": [{
"deptName": "操作部_操作支援",
"businessUnit": "操作部_操作支援",
"deptId": "1000024"
},
{
"deptName": "操作部_控制中心",
"businessUnit": "操作部_控制中心",
"deptId": "1000025"
}
]
}]
},
{
"deptName": "北京XXX集团有限公司",
"businessUnit": "CM000",
"deptId": "1000000"
},
{
"deptName": "上海XXX集团有限公司",
"businessUnit": "CM008",
"deptId": "1000000"
},
{
"deptName": "杭州XXX集团有限公司",
"businessUnit": "CM003",
"deptId": "200002"
},
{
"deptName": "深圳XXX物流集团有限公司",
"businessUnit": "CM011",
"deptId": "9000000",
"childNodes": [{
"deptName": "物流-人力资源部",
"businessUnit": "物流-人力资源部",
"childNodes": [{
"deptName": "物流-人力资源部-薪资组",
"businessUnit": "物流-人力资源部-薪资组",
"deptId": "9000002"
}, {
"deptName": "物流-人力资源部-绩效组",
"businessUnit": "物流-人力资源部-绩效组",
"deptId": "9000003"
}, {
"deptName": "物流-人力资源部-培训组",
"businessUnit": "物流-人力资源部-培训组",
"deptId": "9000004"
}],
"deptId": "9000001"
}, {
"deptName": "物流-信息技术部",
"businessUnit": "物流-信息技术部",
"deptId": "9000005"
}, {
"deptName": "物流-市场销售部",
"businessUnit": "物流-市场销售部",
"deptId": "9000006"
}]
},
{
"deptName": "深圳XXX国际有限公司",
"businessUnit": "CM002",
"deptId": "1000000",
"childNodes": [{
"deptName": "测试2",
"businessUnit": "测试2",
"deptId": "1000001"
},
{
"deptName": "国际总部",
"businessUnit": "国际总部",
"childNodes": [{
"deptName": "总部人力资源部（监察部）",
"businessUnit": "总部人力资源部（监察部）",
"childNodes": [{
"deptName": "总部财务部",
"businessUnit": "总部财务部",
"deptId": "1000006"
}, {
"deptName": "人力资源部-招聘",
"businessUnit": "人力资源部-招聘",
"deptId": "1000747"
}, {
"deptName": "薪酬管理处",
"businessUnit": "薪酬管理处",
"deptId": "1000748"
}, {
"deptName": "管理部",
"businessUnit": "管理部",
"deptId": "1000752"
}, {
"deptName": "人力资源部-薪酬处",
"businessUnit": "人力资源部-薪酬处",
"deptId": "1000756"
}],
"deptId": "1000005"
},
{
"deptName": "总部投资发展部",
"businessUnit": "总部投资发展部",
"deptId": "1000008"
},
{
"deptName": "总部战略与运营管理部",
"businessUnit": "总部战略与运营管理部",
"deptId": "1000009"
},
{
"deptName": "A",
"businessUnit": "A",
"deptId": "1000741"
},
{
"deptName": "121212",
"businessUnit": "121212",
"deptId": "1000744"
},
{
"deptName": "人力资源12345",
"businessUnit": "人力资源12345",
"deptId": "1000755"
},
{
"deptName": "漳州开发区",
"businessUnit": "漳州开发区",
"deptId": "1000757"
},
{
"deptName": "行政部111",
"businessUnit": "行政部111",
"deptId": "1000762"
},
{
"deptName": "人力资源部1234",
"businessUnit": "人力资源部1234",
"deptId": "1000767"
}
],
"deptId": "1000002"
},
{
"deptName": "测试123",
"businessUnit": "测试123",
"deptId": "1000633"
},
{
"deptName": "XXX港务(深圳）有限公司",
"businessUnit": "港务(深圳）有限公司",
"childNodes": [{
"deptName": "港务总经理办公室",
"businessUnit": "港务总经理办公室",
"deptId": "1000681"
}, {
"deptName": "test",
"businessUnit": "test",
"deptId": "1000770"
}],
"deptId": "1000679"
},
{
"deptName": "人力资源--档案",
"businessUnit": "人力资源--档案",
"deptId": "1000753"
},
{
"deptName": "海通部",
"businessUnit": "海通部",
"deptId": "1000760"
},
{
"deptName": "GJ SCT",
"businessUnit": "GJ SCT",
"deptId": "1000763"
}
]
},
{
"deptName": "深圳XXX金融有限公司",
"businessUnit": "CM003",
"deptId": "100000"
},
{
"deptName": "人力资源-招聘组",
"businessUnit": "CM003",
"deptId": "200001"
}
];
$(function(){
$(".tree-items").on("click", "ul li a", function(){
var _this = this;
var siblingsUL = $(_this).parent("li").siblings("li");
siblingsUL.removeClass("open");
siblingsUL.find("li").removeClass("open");
$(_this).parent("li").toggleClass("open");
$(".tree-items li").removeClass("current");
$(_this).parent("li").addClass("current");
});
$("#addTree").click(function(){
var current = $(".tree-items ul li.current");
current.addClass("has-child open");
var deptId = $("#deptId").val();
var deptName = $("#deptName").val();
var businessUnit = $("#businessUnit").val();
var treeHTML = "<li id=\"" + deptId + "\" data-unit=\"" + businessUnit + "\"><a href=\"javascript:void(0);\">" + deptName + "</a></li>";
if(current.children("ul").length > 0) {
current.children("ul").append(treeHTML)
}else {
current.append("<ul>" + treeHTML + "</ul>")
}
});
$("#deleteTree").click(function(){
$(".tree-items ul li.current").remove();
});
initTree(json);
});
function initTree(data) {
$(".tree-items").html(treeItems(data))
}
function treeItems(data) {
var treeHTML = "<ul>";
for(var i=0; i<data.length; i++) {
var item = data[i];
var childNodess = item["childNodes"];
var childHTML = "";
if(childNodess) {
childHTML = treeItems(childNodess);
}
treeHTML += "<li class=\"" + (childNodess ? "has-child": "") + "\" id=\"" + item["deptId"] + "\" data-unit=\"" + item["businessUnit"] + "\"><a href=\"javascript:void(0);\">" + item["deptName"] + "</a>";
treeHTML += childHTML;
treeHTML += "</li>";
}
treeHTML += "</ul>";
return treeHTML;
}
</script>
<style>
html{
font-size: 14px;
}
.tree-items{
width: 90%;
padding: 20px 5%;
}
.tree-items ul{
padding: 0;
margin: 0;
}
.tree-items ul li{
list-style: none;
}
.tree-items ul li a{
text-decoration: none;
color: #333;
}
.tree-items ul>li{
padding: 5px 20px;
}
.tree-items>ul>li{
display: block;
