使用OrgChart插件生成家谱组织结构图
1.orgchart插件:
github地址:https://github.com/dabeng/OrgChart
2.前端代码:
//1.加载树形数据:ajax请求获取json格式的数据(flag参数可以无视,我自己的业务逻辑需要) function setTreeInfo(flag){ $('#chart-container').empty(); $.ajax({ url: "clan/getAllClanInfo.action", type: "POST", dataType: "json", success:function (res) { //开始加载家谱图 setTreeView(res.jiclan[0], flag); console.log("数据加载成功!"); }, error: function(){ console.log("加载数据异常!"); } }); } //2.加载树形结构 function setTreeView(dataJson, flag){ //orgchart的初始化参数可以去github官方看文档,比较简单 jiclan = $('#chart-container').orgchart({ 'data' : dataJson, 'pan': false, 'zoom': false, 'zoominLimit': 3, 'zoomoutLimit': 0.5, 'toggleSiblingsResp': true, 'draggable': false, 'direction' : 'l2r', 'exportButton': true, 'exportFilename': 'XX家谱', 'exportFileextension': 'png', 'nodeTemplate': setNodeTemplate }); //当家谱加载完成后执行,这个函数与家谱图加载已经无关了,执行此函数之前已经完成了家谱图的生成; // orgchartCompleted(flag); } //3.设定树形模板。这个是重点,对于每个节点的生成样式与内容都在这里进行控制 function setNodeTemplate(data){ var str = ""; //如果为男性 if(data.sex == "0"){ //是否已经结婚 if(data.wifeName != null && data.wifeName != ""){ str += '<div class="title clan-man">'+data.name+'</div>' ; str += '<div class="content clan-wife">'+data.wifeName+'</div>'; //下面这一行是为了加载每个节点上面的三个按钮,可以进行查询,修改,增加等操作 str += "<div class='opBtns display-none'>" + "<i class='clan-btn clan-dtalBtn'></i>" + "<i class='clan-btn clan-editBtn'></i>" + "<i class='clan-btn clan-addChildBtn'></i>" + "</div>"; }else{ str += '<div class="title clan-man">'+data.name+'</div>' ; str += '<div class="content clan-single"></div>'; str += "<div class='opBtns display-none'>" + "<i class='clan-btn clan-dtalBtn'></i>" + "<i class='clan-btn clan-editBtn'></i>" + "</div>"; } }else{ str += '<div class="title clan-woman">'+data.name+'</div>' ; str += '<div class="content clan-single"></div>'; str += "<div class='opBtns display-none'>" + "<i class='clan-btn clan-dtalBtn'></i>" + "<i class='clan-btn clan-editBtn'></i>" + "</div>"; } return str; }
3.效果图:
下图只是家谱图中的一部分,我这个家谱一次加载进一百三十多个节点,没有性能问题。