使用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.效果圖：

下圖只是家譜圖中的一部分，我這個家譜一次加載進一百三十多個節點，沒有性能問題。