jQuery：ztree树结构插件具体应用(根据数据渲染树形结构)

var roleStr = ''
//点击配置树形结构弹框事件
tableData.peizhi = function(data){
    layer.open({
        type: 1,
        title: '角色管理',
        content: $('#ztree'),
        area:  ['60%', '500px'],
        success: function(index, layero){
            //do something
            $('#uid').val(data.uid)
            roleStr = $('#uid').val()
        }
    });
};
table = renderTable.render(tableData,['30%', '460px']);
var setting = {
    data:{
        simpleData:{
            enable:true,
            idKey:"id",
            pidKey:"pid",
            rootPid:0
        }
    },
    check: {
        enable: true
    },
    callback: {
        beforeCheck: beforeCheck,
        onCheck: onCheck,
        onCollapse:onCollapse,
    }
};
var treeNodes = [];
var userEmpId =[];
var userId = [];
var newList = []
//一切准备好后初始化树
$(document).ready(function() {
    //初始化zNodes数组——treeNodes
    $(function () {
        //从后台获取json串的连接
        var url = "/dept/getList?page=1&limit=99999";
        var URLmsg
        $.ajax({
            url: '/user/getList?page=1&limit=99999',
            method:'get',
            success:function(msg){

                msg.data.forEach(function(ele){
                    userEmpId.push(ele.empId);
                    userId.push(ele.uid)
                })
            }
        })
        $.ajax({
            url: url,
            method: 'get',
            //这个是传到后台的数据，后台就是根据它获取zTree结点信息的，它是一个json格式的串
            success: function (data) {
                var layerDelay = layer.load(1);
                $.ajax({
                    url: "/emp/getLEList?page=1&limit=99999",
                    method: 'get',
                    success: function (rowdata) { //添加子节点到指定的父节点
                        layer.close(layerDelay);
                        //数据整合
                        var empList = rowdata.data;
                        //
                        for(var i=0;i<empList.length;i++){
                            for(var j=0;j<userEmpId.length;j++){
                                if(empList[i].id==userEmpId[j]){
                                    empList[i].id = userId[j]
                                    newList.push(empList[i])
                                }
                            }
                        }
                        var numFi =11;
                        var nnmFi = 111;
                        var nnmSc = 1111;
                        var numSc = 32;
                        var num = 1;
                        var listL = [];
                        var msg = data.data;
                        msg.forEach(function(ele){
                            if(ele.code.length==2){
                                treeNodes.push({
                                    "isParent": 'true',
                                    "id":num++,
                                    "name":ele.name,
                                    "pId":0,
                                    "dbj":ele.code
                                });
                            }
                            else if(ele.code.length==4&&ele.code.substr(0,2)=='GM'){
                                treeNodes.push({
                                    "isParent": 'true',
                                    "id":numFi++,
                                    "name":ele.name,
                                    "pId":1,
                                    "dbj":ele.code
                                });
                                listL.push(ele.code)
                            }
                            else if(ele.code.length==4&&ele.code.substr(0,2)=='HM'){
                                treeNodes.push({
                                    "isParent": 'true',
                                    "id":numSc++,
                                    "name":ele.name,
                                    "pId":2,
                                    "dbj":ele.code
                                });
                            }
                            else if(ele.code.length==8){
                                treeNodes.push({
                                    "isParent": 'true',
                                    "id": nnmSc++,
                                    "name": ele.name,
                                    "pId": 126,
                                    "dbj": ele.code
                                });
                            }

                        });
                        for(var i=11;i<listL.length+11;i++){
                            msg.forEach(function (ele) {
                                if(ele.code.length==6&&ele.code.substr(0,4)==ele.upcode&&listL[i-11]==ele.upcode) {
                                    treeNodes.push({
                                        "isParent": 'true',
                                        "id": nnmFi++,
                                        "name": ele.name,
                                        "pId": i,
                                        "dbj": ele.code
                                    });
                                }
                            })
                        };
                        for (var i = 0; i < newList.length; i++) {
                            if (newList[i].dept.code.length == 2&&newList[i].dept.code=='GM') {
                                treeNodes.push({
                                    "isParent": 'false',
                                    "id": i,
                                    "name": newList[i].name,
                                    "pId": 1,
                                    "dbj": newList[i].id
                                });
                            }
                            else if(newList[i].dept.code.length == 2&&newList[i].dept.code=='HM'){
                                treeNodes.push({
                                    "isParent": 'false',
                                    "id": i,
                                    "name": newList[i].name,
                                    "pId": 2,
                                    "dbj": newList[i].id
                                });
                            }
                        }
                        for(var j=0;j<treeNodes.length;j++){
                            for (var i = 0; i < newList.length; i++) {
                                if (newList[i].dept.code.length == 4&&newList[i].dept.code==treeNodes[j].dbj) {
                                    treeNodes.push({
                                        "isParent": 'false',
                                        "id":nnmFi++,
                                        "name": newList[i].name,
                                        "pId": treeNodes[j].id,
                                        "dbj": newList[i].id
                                    });
                                }
                                else if((newList[i].dept.code.length == 6&&newList[i].dept.code==treeNodes[j].dbj)||(newList[i].dept.code.length == 8&&newList[i].dept.code==treeNodes[j].dbj)){
                                    treeNodes.push({
                                        "isParent": 'false',
                                        "id":nnmSc++,
                                        "name": newList[i].name,
                                        "pId": treeNodes[j].id,
                                        "dbj": newList[i].id
                                    });
                                }
                            }
                        }



                        $.fn.zTree.init($("#treeDemo"), setting,treeNodes);

                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        var nodes = treeObj.getNodes();
                        for (var i = 0; i < nodes.length; i++) { //设置节点展开
                            treeObj.expandNode(nodes[i], true, false, true);
                        }
                        // treeObj.expandAll(true);
                        //按钮提交事件
                        // submitBtn()

                    }
                });


            }
        });
    });
});
var str=[];
//按钮提交事件

var imBtn = document.getElementById('imBtn');
imBtn.addEventListener('click',function(){
    var xstr = unique(str).join(',')
    // var xstr = unique(str)
    layer.confirm(
        '是否确认提交？',
        {btn: ['确定','取消']},
        function(){
            $.ajax({
                url: '/role/saveUserRole',
                method: 'get',
                //data:{userUids:JSON.stringify(xstr),roleUid:JSON.stringify(roleStr)},
                data:{userUids:xstr,roleUid:roleStr},
            }).done(function(msg){
                if(msg.code==1001){
                    return layer.alert(msg.msg)
                }else if(msg.code==9000){
                    return layer.alert(msg.msg)
                }

                layer.closeAll();
                layer.msg('操作成功');
            })
        }
    )
})
function unique(arr){
    var len = arr.length;
    var result = []
    for(var i=0;i<len;i++){
        var flag = true;
        for(var j = i;j<arr.length-1;j++){
            if(arr[i]==arr[j+1]){
                flag = false;
                break;
            }
        }
        if(flag){
            result.push(arr[i])
        }
    }
    return result;
}
//展开监听事件
// function onExpand(event, treeId, treeNode) {
//     $('#'+treeNode.tId+' ul').html('');
//     var URLmsg
//     // 判断是否父节点
//     // if (!treeNode.isParent) {
//     //alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
//     $.ajax({
//         // url: "../json/table.json",//请求的action路径
//         url:"/dept/getList?page=1&limit=99999",
//         method:'get',
//         // data: {"pid": treeNode.id},
//         success: function (rowdata) { //添加子节点到指定的父节点
//             var list = rowdata.data;
//
//             var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//
//             var data = [];
//
//             URLmsg=treeNode.dbj
//             $.ajax({
//                 url: "/emp/getLEList?deptCode="+URLmsg,
//                 method: 'get',
//                 success: function (msg) { //添加子节点到指定的父节点
//                     var empList = msg.data;
//                     empList.forEach(function(ele){
//                         data.push({
//                             "isParent": 'false',
//                             "id": ele.id,
//                             "name": ele.name,
//                             "pId": ele.id
//                         });
//                     });
//                     treeObj.addNodes(treeNode, data, true);// 如果是根节点，那么就在null后面加载数据
//                     treeObj.expandNode(treeNode, true, false, false);// 将新获取的子节点展开
//                 }
//             });
//             //第一层级门店
//             if (treeNode.isFirstNode && treeNode.parentTId == null) {
//                 // treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
//                 list.forEach(function (ele) {
//                     if (ele.code.length == 4 && ele.code.substr(0, 2) == treeNode.pId) {
//                         data.push({
//                             "isParent": 'true',
//                             "id": ele.uid,
//                             "name": ele.name,
//                             "pId": ele.code
//                         });
//                     }
//                 });
//                 treeObj.addNodes(treeNode, data, true);// 如果是根节点，那么就在null后面加载数据
//                 treeObj.expandNode(treeNode, true, false, false);// 将新获取的子节点展开
//             } else if (treeNode.isLastNode) {
//                 list.forEach(function (ele) {
//                     if (ele.code.length == 4 && ele.code.substr(0, 2) == treeNode.pId) {
//                         data.push({
//                             "isParent": 'true',
//                             "id": ele.uid,
//                             "name": ele.name,
//                             "pId": ele.code
//                         });
//                     }
//                 });
//                 treeObj.addNodes(treeNode, data, true);// 如果是根节点，那么就在null后面加载数据
//                 treeObj.expandNode(treeNode, true, false, false);// 将新获取的子节点展开
//             }
//             //第二层级门店
//             else if (treeNode.parentTId == "treeDemo_1") {
//                 list.forEach(function (ele) {
//                     if (ele.code.length == 6 && ele.code.substr(0, 4) == treeNode.pId) {
//                         data.push({
//                             "isParent": 'true',
//                             "id": ele.uid,
//                             "name": ele.name,
//                             "pId": ele.code
//                         });
//                     }
//                 });
//                 treeObj.addNodes(treeNode, data, true);// 如果是根节点，那么就在null后面加载数据
//                 treeObj.expandNode(treeNode, true, false, false);// 将新获取的子节点展开
//             }
//             //第三层级门店
//             else if (treeNode.parentTId == "treeDemo_1") {
//                 list.forEach(function (ele) {
//                     if (ele.code.length == 8 && ele.code.substr(0, 6) == treeNode.pId) {
//                         data.push({
//                             "isParent": 'true',
//                             "id": ele.uid,
//                             "name": ele.name,
//                             "pId": ele.code
//                         });
//                     }
//                 });
//                 treeObj.addNodes(treeNode, data, true);// 如果是根节点，那么就在null后面加载数据
//                 treeObj.expandNode(treeNode, true, false, false);// 将新获取的子节点展开
//             }
//             else {
//                 treeObj.reAsyncChildNodes(treeNode, "refresh");
//             }
//         }
//
//     })
//     showLog("[ "+getTime()+" onExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
// }
function onCollapse(event, treeId, treeNode) {
    showLog("[ "+getTime()+" onCollapse ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
}

function expandNode(e) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = e.data.type,
        nodes = zTree.getSelectedNodes();
    if (type.indexOf("All")<0 && nodes.length == 0) {
        alert("请先选择一个父节点");
    }

    if (type == "expandAll") {
        zTree.expandAll(true);
    } else if (type == "collapseAll") {
        zTree.expandAll(false);
    } else {
        var callbackFlag = $("#callbackTrigger").attr("checked");
        for (var i=0, l=nodes.length; i<l; i++) {
            zTree.setting.view.fontCss = {};
            if (type == "expand") {
                zTree.expandNode(nodes[i], true, null, null, callbackFlag);
            } else if (type == "collapse") {
                zTree.expandNode(nodes[i], false, null, null, callbackFlag);
            } else if (type == "toggle") {
                zTree.expandNode(nodes[i], null, null, null, callbackFlag);
            } else if (type == "expandSon") {
                zTree.expandNode(nodes[i], true, true, null, callbackFlag);
            } else if (type == "collapseSon") {
                zTree.expandNode(nodes[i], false, true, null, callbackFlag);
            }
        }
    }
}
function beforeCheck(treeId, treeNode) {
    className = (className === "dark" ? "":"dark");
    showLog("[ "+getTime()+" beforeCheck ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
    return (treeNode.doCheck !== false);
}
function onCheck(e, treeId, treeNode) {
    if(treeNode.checked==false){
        str = [];
    }
    var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
        nodes=treeObj.getCheckedNodes(true);
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].isParent==false&&nodes[i].checked==true){
            str.push(nodes[i].dbj)
        }
        // return str; //获取选中节点的值
    }

    //如果被选事件
    if(treeNode.checked==true&&treeNode.isParent==false){
        str.push(treeNode.dbj)
    }else if(treeNode.checked==false&&treeNode.isParent==false){
        for(var i=0;i<str.length;i++){
            if(treeNode.dbj==str[i]){
                str.splice(i,1)
            }
        }
    }
    return str
    showLog("[ "+getTime()+" onCheck ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
}
function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; i<l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
    }
    return childNodes;
}
var log, className = "dark";
function showLog(str) {
    if (!log) log = $("#log");
    log.append("<li class='"+className+"'>"+str+"</li>");
    if(log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
    }
}
function getTime() {
    var now= new Date(),
        h=now.getHours(),
        m=now.getMinutes(),
        s=now.getSeconds(),
        ms=now.getMilliseconds();
    return (h+":"+m+":"+s+ " " +ms);
}

function refreshNode(e) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = e.data.type,
        silent = e.data.silent,
        nodes = zTree.getSelectedNodes();
    if (nodes.length == 0) {
        alert("请先选择一个父节点");
    }
    for (var i=0, l=nodes.length; i<l; i++) {
        zTree.reAsyncChildNodes(nodes[i], type, silent);
        if (!silent) zTree.selectNode(nodes[i]);
    }
}
function setAutoTrigger(e) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.setting.check.autoCheckTrigger = $("#autoCallbackTrigger").attr("checked");
    $("#autoCheckTriggerValue").html(zTree.setting.check.autoCheckTrigger ? "true" : "false");
}
function checkNode(e) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = e.data.type,
        nodes = zTree.getSelectedNodes();
    if (type.indexOf("All")<0 && nodes.length == 0) {
        alert("请先选择一个节点");
    }

    if (type == "checkAllTrue") {
        zTree.checkAllNodes(true);
    } else if (type == "checkAllFalse") {
        zTree.checkAllNodes(false);
    } else {
        var callbackFlag = $("#callbackTrigger").attr("checked");
        for (var i=0, l=nodes.length; i<l; i++) {
            if (type == "checkTrue") {
                zTree.checkNode(nodes[i], true, false, callbackFlag);
            } else if (type == "checkFalse") {
                zTree.checkNode(nodes[i], false, false, callbackFlag);
            } else if (type == "toggle") {
                zTree.checkNode(nodes[i], null, false, callbackFlag);
            }else if (type == "checkTruePS") {
                zTree.checkNode(nodes[i], true, true, callbackFlag);
            } else if (type == "checkFalsePS") {
                zTree.checkNode(nodes[i], false, true, callbackFlag);
            } else if (type == "togglePS") {
                zTree.checkNode(nodes[i], null, true, callbackFlag);
            }
        }
    }
}
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting,treeNodes);
    $("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
    $("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
    $("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
    $("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
    $("#checkTrue").bind("click", {type:"checkTrue"}, checkNode);
    $("#checkFalse").bind("click", {type:"checkFalse"}, checkNode);
    $("#toggle").bind("click", {type:"toggle"}, checkNode);
    $("#checkTruePS").bind("click", {type:"checkTruePS"}, checkNode);
    $("#checkFalsePS").bind("click", {type:"checkFalsePS"}, checkNode);
    $("#togglePS").bind("click", {type:"togglePS"}, checkNode);
    $("#checkAllTrue").bind("click", {type:"checkAllTrue"}, checkNode);
    $("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);
    $("#autoCallbackTrigger").bind("change", {}, setAutoTrigger);
});