文章摘要
这篇文章介绍了一种通过JavaScript代码实现的树状结构展示部门和员工数据的技术。代码主要实现了从API获取数据并将其展示为层级列表的功能。文章重点描述了树的结构定义，包括部门id、名称、状态、检查框、图标和属性等字段，以及如何动态加载和转换数据为树状形式。文章还提到了使用AJAX请求来获取数据，并通过递归函数将员工数据进一步分解，最终生成可交互的树状列表。该技术可以帮助用户清晰地展示组织结构和员工分布情况。
<script>
$(function(){
$.ajax({
url:”departmentAction_getAllDep.action”,
type:”post”,
success:function(result){
//console.log(result);
$(“#cc”).combotree(‘loadData’,b1(result));
}
});
$(“#cc”).combotree({
animate:true,
//选择树节点触发事件
onSelect : function(node) {
n=node;
//返回树对象
var tree=$(this).tree;
//选中的节点是否为叶子节点,如果不是叶子节点,清除选中
var isLeaf=tree(‘isLeaf’, node.target);
if (!isLeaf) {
//清除选中
$(“#cc”).combotree(‘clear’);
}
}
});
});
var tree={
id:”,
text:”,
state:”,
checked:”,
iconCls:”,
attributes:”,
children:”
}
function b1(result){
var t=[];
$.each(result,function(index,dept){
t[index]=b2(dept);
});
return t;
}
function b2(dept){
var tree=new Object();
tree.id=dept.depId;
tree.text=dept.depName;
tree.state=’closed’;
tree.checked=’false’;
if(dept.employees.length !=0){
tree.children=b3(dept.employees);
}else{
tree.children=[];
}
return tree;
}
function b3(employees){
var easyTree=[];
$.each(employees,function(index,item){
easyTree[index]=b4(item);
});
return easyTree;
}
function b4(item){
var tree=new Object();
tree.id=item.empId;
tree.text=item.empName;
if(item.empSex==”男”){
tree.iconCls=’icon-nan’;
}else{
tree.iconCls=’icon-female’;
}
return tree;
}
</script>