jQuery组织结构图表插件OrgChart

jQuery组织结构图表插件OrgChart组织结构布局代码是一款可以使用本地数据，或通过ajax调用来完成数据的填充。

js代码
<scriptsrc="js/jquery-2.1.1.min.js"type="text/javascript"></script>
<scripttype="text/javascript"src="js/html2canvas.js"></script>
<scripttype="text/javascript"src="js/jquery.orgchart.js"></script>
<scripttype="text/javascript">
'usestrict';
(function($){
$(function(){
vardatascource={
'name':'LaoLao',
'title':'generalmanager',
'relationship':{'children_num':8},
'children':[
{'name':'BoMiao','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}},
{'name':'SuMiao','title':'departmentmanager','relationship':{'children_num':2,'parent_num':1,'sibling_num':7},
'children':[
{'name':'TieHua','title':'seniorengineer','relationship':{'children_num':0,'parent_num':1,'sibling_num':1}},
{'name':'HeiHei','title':'seniorengineer','relationship':{'children_num':2,'parent_num':1,'sibling_num':1},
'children':[
{'name':'PangPang','title':'engineer','relationship':{'children_num':0,'parent_num':1,'sibling_num':1}},
{'name':'XiangXiang','title':'UEengineer','relationship':{'children_num':0,'parent_num':1,'sibling_num':1}}
]
}
]
},
{'name':'YuJie','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}},
{'name':'YuLi','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}},
{'name':'HongMiao','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}},
{'name':'YuWei','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}},
{'name':'ChunMiao','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}},
{'name':'YuTie','title':'departmentmanager','relationship':{'children_num':0,'parent_num':1,'sibling_num':7}}
]
};$('#chart-container').orgchart({
'data':datascource,
'depth':2,
'nodeTitle':'name',
'nodeContent':'title'
});});})(jQuery);
</script>



下载

2023-11-22 21:44 上传

点击文件名下载附件