【zTree】zTree根據后台數據生成樹並動態設置前面的節點復選框的選中狀態

 

0.頁面中准備樹的ul

<ul id="treeDemo10" class="ztree" style="display: none;"></ul>

 1.生成部門樹的JS

// 查詢外部部門結構
var searchUnitTree = function() {
    $.ajax({
        url : contextPath + '/exam_getUnitTree.action',
        async : true,
        dataType : 'json',
        success : function(response) {
            zNodes11 = response.unitTrees;
            // 生成樹結構
            geneUnitTree(zNodes11);

        },
        error : function() {
            alert("查詢外部部門樹失敗！！！")
        }
    });
}

// 生成外部部門樹
function geneUnitTree(unitTrees) {
    $("#treeDemo10").html(""); // 清空樹結構
    var setting = {
        view : {
            selectedMulti : false
        },
        check : {
            enable : true
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "unitId",
                pIdKey : "upUnitId",
                rootPId : null
            },
            key : {
                name : "name",
            }
        },
        callback : {
            beforeCheck : beforeCheck_out,
            onClick : zTreeOnClick_out
        }
    };
    var treeNodes11 = unitTrees;
    $.fn.zTree.init($("#treeDemo10"), setting, treeNodes11);
}
// 鼠標點擊樹事件(打印點擊的id與名字)
function zTreeOnClick_out(event, treeId, treeNode) {
    // alert(treeNode.unitId + ", " + treeNode.name);
    alert($("#el_chooseDepart1").text());

}
// 點擊前面的復選框事件
function beforeCheck_out(treeId, treeNode) {
    className10 = (className10 === "dark" ? "" : "dark");
    el_id = treeNode.name;
    // 判斷點擊的節點是否被選中，返回false 和 true
    if (!treeNode.checked) {// 選中
        showLog10_out(treeNode.name + ',');// 加上逗號加以區分
        $("#department_employee_out")
                .append(
                        // 添加部門到下面的選擇員工
                        '<div class="panel panel-default el_departPersons" id="'
                                + treeNode.name
                                + '">'
                                + '<div class="panel-heading"><span class="el_addDepart" >'
                                + treeNode.name
                                + '</span>&nbsp;&nbsp;'
                                + '(人數：<span class="employeeNum">0</span>)</div>'
                                + '<div class="panel-body"></div>' + '</div>');
    } else { // 點擊選中，向讓其未選中
        noshowLog10_out(treeNode.name + ',', treeNode);
        $("#" + treeNode.name).remove();// 反選復選框刪除部門
        var parentzTree = treeNode.getParentNode();
    }
    return (treeNode.doCheck !== false);
}
function showLog10_out(str) {
    if (!el_chooseDepart1)
        el_chooseDepart1 = $("#el_chooseDepart1");
    el_chooseDepart1.append("<li class='" + className10 + "' id='" + el_id
            + "'>" + str + "</li>");

    if (el_chooseDepart1.children("li").length > 6) {
        el_chooseDepart1.get(0).removeChild(el_chooseDepart1.children("li")[0]);
    }
}

function noshowLog10_out(str, tNode) {
    if (!el_chooseDepart1)
        el_chooseDepart1 = $("#el_chooseDepart1");
    // 刪除當前選中的樹的名字
    el_chooseDepart1.children("#" + el_id).remove();
    // 刪除當前子的樹的名字
    if (tNode.isParent) {
        var childrenNodes = tNode.children;
        if (childrenNodes) {
            for (var i = 0; i < childrenNodes.length; i++) {
                alert();
                var el_id0 = childrenNodes.name;
                el_chooseDepart1.children("#" + el_id0).remove();

                // result += ',' + childrenNodes[i].id;
                // result = getChildNodes(childrenNodes[i], result);
            }
        }
    }

}

 

后台返回的JSON數據格式:

{"unitTrees":[{"name":"部門1","unitId":"1"},{"upUnitId":"1","name":"部門10001","unitId":"10001"},{"upUnitId"
:"10001","name":"部門100010001","unitId":"100010001"},{"upUnitId":"1","name":"部門10002","unitId":"10002"
},{"upUnitId":"10002","name":"部門100020001","unitId":"100020001"},{"upUnitId":"1","name":"部門10003","unitId"
:"10003"}]}

 

生成的樹結構: 

 

 

 2.根據樹的name屬性動態設置前面的復選框為選中(根據樹節點的名字判斷，也可以根據其他屬性判斷)

　　// 獲取樹對象
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo10");
    /** 獲取所有樹節點 */
    var nodes = treeObj.transformToArray(treeObj.getNodes());
        // 遍歷樹節點設置樹節點為選中
        for (var k = 0, length_3 = nodes.length; k < length_3; k++) {
            if (unitName[j] == nodes[k].name) {
                nodes[k].checked = true;
　　　　　　　　　　treeObj.updateNode(nodes[k],true);
            }
        }

 

補充:設置checked屬性之后，一定要更新該節點，否則會出現只有鼠標滑過的時候節點才被選中的情況

    // 獲取樹對象
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    /** 獲取所有樹節點 */
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    // 遍歷樹節點設置樹節點為未選中
    for (var k = 0, length_3 = nodes.length; k < length_3; k++) {
        nodes[k].checked = false;
       treeObj.updateNode(nodes[k],true);
    }

 

查看updateNode方法解釋:(也就是更新的時候需要安裝自己定義的上級與下級關聯關系進行更新)

 

 

 

 

 js中debugger查看nodes（JS數組）:

 

查看第一個節點:(有好多屬性)

 

 

效果: