一挠阁、樹簡介

官方地址:https://gitee.com/zTree/zTree_v3
API文檔:http://www.treejs.cn/v3/api.php
樹形表格:https://github.com/ludo/jquery-treetable

二斯撮、引入依賴文件

<link href="zTreeStyle.css" rel="stylesheet"/>
<script src="jquery.ztree.all-3.5.js"></script>

三乞而、使用方式

<div id="tree" class="ztree"></div> -> 樹容器

var node = [ -> 樹節(jié)點(diǎn)數(shù)據(jù)格式
 {id: 1, name: "用戶管理", pId:0},
 {id: 1001, name: "增加", pId:1},
 {id: 1002, name: "修改", pId:1},
 {id: 1003, name: "查詢", pId:1},
 {id: 1004, name: "刪除", pId:1}];

var setting = {
    check: { -> 設(shè)置復(fù)選框類型
        enable: true,
        nocheckInherit: false,
        checked:true -> 是否勾選
    },
    data: { -> 默認(rèn)設(shè)置屬性
        simpleData: {
        enable: true
    },
    callback: { -> 監(jiān)聽事件
        onClick: zTreeOnClick
        }
    }
};

var $tree = $.fn.zTree.init($("#tree"), setting, node); -> 構(gòu)建樹對(duì)象
$tree.expandAll(false); -> 是否展開所有樹節(jié)點(diǎn)
$tree.checkAllNodes(false); -> 默認(rèn)不勾選
var childNode = {"id": 0, "pId": 0, "name": "name"}; -> 節(jié)點(diǎn)
$tree.addNodes(null(parentNode), childNode); -> 動(dòng)態(tài)添加節(jié)點(diǎn)

for (var i = 0; i < data.length; i++) { -> ajax result
    var node = $tree.getNodeByParam("id", data[i].id); -> 獲取樹節(jié)點(diǎn)
    updateParentTreeNode(node, $tree);
}

function zTreeOnClick(event, treeId, treeNode) { -> 復(fù)寫事件
    if (typeof treeNode.children == 'undefined') { -> 最深層
        $("input[name=nodeId]").val(treeNode.id);
        $("input[name=nodeName]").val(treeNode.name);
    }
    updateChildTreeNode(treeNode,$tree); -> 點(diǎn)擊節(jié)點(diǎn)同時(shí)設(shè)置勾選
};

function getDepthTreeNode() {
    var $tree = $.fn.zTree.getZTreeObj("tree"), -> 獲取樹對(duì)象
        nodes = $tree.getCheckedNodes(true), -> 獲取所有選中節(jié)點(diǎn)
        ids = "";
    for (var i = 0; i < nodes.length; i++) {
        if (typeof nodes[i].children == 'undefined') { -> 最深層
            ids += nodes[i].id;
            ids += ",";
        }
    }
    return ids;
}

function updateParentTreeNode(node, tree) { -> 渲染節(jié)點(diǎn)
    if (node != null) {
        node.checked = true; -> 設(shè)置勾選狀態(tài)
        tree.updateNode(node); -> 更新節(jié)點(diǎn)狀態(tài)
        updateParentTreeNode(node.getParentNode(), tree); -> 父節(jié)點(diǎn)勾選
    }
}

function updateChildTreeNode(node, tree) { -> 渲染節(jié)點(diǎn)
    if (node != null) {
        node.checked = true; -> 設(shè)置勾選狀態(tài)
        tree.updateNode(node); -> 更新節(jié)點(diǎn)狀態(tài)
        if (node.isParent) {
            for (var i = 0; i < node.children.length; i++) {
                updateChildTreeNode(node.children[i], tree); -> 子節(jié)點(diǎn)勾選
            }
        }
    }
}