一、树简介

官方地址: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 = [ -> 树节点数据格式
 {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: { -> 设置复选框类型
        enable: true,
        nocheckInherit: false,
        checked:true -> 是否勾选
    },
    data: { -> 默认设置属性
        simpleData: {
        enable: true
    },
    callback: { -> 监听事件
        onClick: zTreeOnClick
        }
    }
};

var $tree = $.fn.zTree.init($("#tree"), setting, node); -> 构建树对象
$tree.expandAll(false); -> 是否展开所有树节点
$tree.checkAllNodes(false); -> 默认不勾选
var childNode = {"id": 0, "pId": 0, "name": "name"}; -> 节点
$tree.addNodes(null(parentNode), childNode); -> 动态添加节点

for (var i = 0; i < data.length; i++) { -> ajax result
    var node = $tree.getNodeByParam("id", data[i].id); -> 获取树节点
    updateParentTreeNode(node, $tree);
}

function zTreeOnClick(event, treeId, treeNode) { -> 复写事件
    if (typeof treeNode.children == 'undefined') { -> 最深层
        $("input[name=nodeId]").val(treeNode.id);
        $("input[name=nodeName]").val(treeNode.name);
    }
    updateChildTreeNode(treeNode,$tree); -> 点击节点同时设置勾选
};

function getDepthTreeNode() {
    var $tree = $.fn.zTree.getZTreeObj("tree"), -> 获取树对象
        nodes = $tree.getCheckedNodes(true), -> 获取所有选中节点
        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) { -> 渲染节点
    if (node != null) {
        node.checked = true; -> 设置勾选状态
        tree.updateNode(node); -> 更新节点状态
        updateParentTreeNode(node.getParentNode(), tree); -> 父节点勾选
    }
}

function updateChildTreeNode(node, tree) { -> 渲染节点
    if (node != null) {
        node.checked = true; -> 设置勾选状态
        tree.updateNode(node); -> 更新节点状态
        if (node.isParent) {
            for (var i = 0; i < node.children.length; i++) {
                updateChildTreeNode(node.children[i], tree); -> 子节点勾选
            }
        }
    }
}