orgChart生成组织结构图应用

orgChart 是一个开源JS，可用于生成组织结构图。现构建如下：

1）动态生成HTML作为数据source

[javascript] view plain copy

print?

1. var preTitle = "";  
2.                 var content = "<ul id='basic-stacking-source' class='hide'><li>Band<ul>";     // header  
3.   
4.                 $.each(titleNameList, function(i, item){  
5.                     if (preTitle != item.title) {  
6.                         if (preTitle != "") {  
7.                             content += "</ul></li>";                                                            // end name & title  
8.                         }  
9.                         preTitle = item.title;  
10.                         content += "<li>" + item.title + "<ul>";  
11.                           
12.                     }  
13.                     content += "<li>" + item.name + "</li>";  
14.                 });  
15.                 content += "</ul></li>";                                                                        // end name & title finally  
16.                 content += "</ul></li></ul>";                                                                 // end header  
17.                 $("#temp").html(content);  

2）调用orgChart

[javascript] view plain copy

print?

1. $("#basic-stacking-source").orgChart({  
2.     container: $("#names_chart")  
3. });  

记得引入相应的包

[javascript] view plain copy

print?

1. jquery.orgchart.css  
2. /echarts/jquery.orgchart.js （这个是调试时用的，production要用min版）  

效果图

注：上图与官方图有样式区别，是因我修改原代码中的css以适应多分支的情况，由图可见当分支太多时，orgchart显示起来还是太拥挤了。（官方图如下）