zTree

使用

引入资源

将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录。

Demo

<%--z树HTML代码--%>
<div id="ztree">
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<%--z树JS代码--%>
<script type="text/javascript" language="JavaScript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {};
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
        {name:"test1", open:true, children:[
                {name:"test1_1"}, {name:"test1_2"}]},
        {name:"test2", open:false, children:[
                {name:"test2_1"}, {name:"test2_2"}]},
        {name:"mytest", isParent:true}
    ];
    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>

后续调用

function showSelectNodes() {
    var tree = $.fn.zTree.getZTreeObj("treeDemo");// 获取zTree对象，对它的操作都基于这个对象。
    var nodes = tree.getCheckedNodes();// 获取被勾选的所以节点
    for (var i=0; i<nodes.length; i++){
        console.log(nodes[i]);// 这些节点是被复制进来的，并非原数据，但是拥有原数据的所有属性以及zTree新增的属性。
    }
}

配置 API文档（很详细好用）

核心

$.fn.zTree.init(obj, zSetting, zNodes)：zTree初始化方法，参数分别为展现zTree的DOM容器，配置数据，节点数据。返回值为zTree对象，提供操作zTree的各种方法。

$.fn.zTree.getZTreeObj(treeId)：获取zTree对象的方法，参数为DOM容器的id（不用#了）。

$.fn.zTree.destroy(treeId)：销毁zTree的方法，参数为DOM容器的id。

zTreeObj.addNodes(parentNode, [index], newNodes, isSilent)zTreeObj.：添加节点

settings

// 自己写的异步加载配置，需要注意，这里的异步是一次性异步，所以需要将所有数据都一次加载出来，而不能像三级联动一样一级一级去加载
var setting = {
        view: {
            showLine: false
        },
        async: {
            enable: true,
            url: "${basePath}user/getAllData",
            type: "POST",
            autoParam: ["id"],
            //dataFilter: filter //对异步获取的数据进行处理
        },
        data: {
            key: {
              isParent: "hasChild" //设置isParent的辨认方式为 hasChild的值 。
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: null
            }
        },
        callback: {
            // onAsyncSuccess: 
            // onAsyncError: 
            onCheck: function zTreeOnCheck(event, treeId, treeNode) {
            },
            onClick: function zTreeOnClick(event, treeId, treeNode) {
            }
        }
    };

TreeNodes

• 标准JSON格式

// 使用嵌套关系表示父子关系
var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}
];

• 简单JSON格式

//根据id/pid表示父子关系，需要在setting.data.simpleData中开启，并且可以在其中修改对应关系。
var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];