使用OrgChart插件生成家谱组织结构图-白红宇

使用OrgChart插件生成家谱组织结构图

阅读量：6543 次

发布时间：2019-06-24

本文共 2308 字，大约阅读时间需要 7 分钟。

1.orgchart插件：

github地址：

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 += '
      
       '+data.name+'
      
' ;            str += '
      
       '+data.wifeName+'
      
';            //下面这一行是为了加载每个节点上面的三个按钮，可以进行查询，修改，增加等操作            str += "
      
       " +                        "
       " +                        "
       " +                        "
       " +                    "
      
";        }else{            str += '
      
       '+data.name+'
      
' ;            str += '
      
';            str += "
      
       " +                        "
       " +                        "
       " +                    "
      
";        }    }else{        str += '
      
       '+data.name+'
      
' ;        str += '
      
';        str += "
      
       " +                    "
       " +                    "
       " +                "
      
";    }    return str;}