zTree的基本用法

最近被前台技术中一种树状展示数据的问题烦死了，客户需求这样展示数据之间的关系，没办法查资料学习一遍，顺便分享下心得

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

• 兼容 IE、FireFox、Chrome 等浏览器
• 在一个页面内可同时生成多个 Tree 实例
• 支持 JSON 数据
• 支持一次性静态生成 和 Ajax 异步加载 两种方式
• 支持多种事件响应及反馈
• 支持 Tree 的节点移动、编辑、删除
• 支持任意更换皮肤 / 个性化图标（依靠css）
• 支持极其灵活的 checkbox 或 radio 选择功能
• 简单的参数配置实现 灵活多变的功能

点击进入api网页：zTree的API

先来看下我们想要实现的效果哦

1.png

这边后台数据库设计部分不多说了，设好父级和子级的关系，查出所有的数据传到前台页面，重点是前台如何展示这样的数据

【部分函数和属性介绍】

• 核心参数：setting

var setting = {
        view: {
            showIcon: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            }
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        callback: {
            beforeDrag: false,
            onClick: zTreeOnClick
        },
        async:{
            enable: true,
            url: "<%=basePath%>arch_JobArch_getChildNodeJson.do",
            autoParam:["id"],
        }
    };

function zTreeOnClick(event, treeId, treeNode) {
    var jobid = treeNode.id;
    //岗位详情展示
    $.ajax({
        type:"post",
        url:"<%=basePath%>arch_JobArch_getJobDetail.do",
        data:{"jobid":jobid},
        dataType:'json',
        success:function(data,status){
            if(status){
                analyseJobDetail(data);
            }
        }
    });

1.先来看看view: {showIcon: false}属性

设置 zTree 是否显示节点的图标。
默认值：true
true / false 分别表示 显示 / 隐藏 图标

如果属性设置为true,那么效果是这样的

2.png

如果属性设置为false,那么效果是这样的

3.png

这其实只是个人爱好或客户要求而已，没啥好说的，看到能明白干嘛的就好了。

2.setting.data.simpleData

enable:
确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
默认值：false
true / false 分别表示 使用 / 不使用 简单数据模式
idKey:
节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
默认值："id"
pIdKey:
节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
默认值："pId"

3.setting.edit

enable:
设置 zTree 是否处于编辑状态
请在初始化之前设置，初始化后需要改变编辑状态请使用 zTreeObj.setEditable() 方法
默认值: false
true / false 分别表示 可以 / 不可以 编辑
showRemoveBtn:
设置是否显示删除按钮。[setting.edit.enable = true 时生效]
当点击某节点的删除按钮时：
1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。
2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发 setting.callback.onRemove 回调函数。
默认值：true
true / false 分别表示 显示 / 隐藏 删除按钮
showRenameBtn:
设置是否显示编辑名称按钮。[setting.edit.enable = true 时生效]
当点击某节点的编辑名称按钮时：
1、进入节点编辑名称状态。
2、编辑名称完毕（Input 失去焦点 或 按下 Enter 键），会触发 setting.callback.beforeRename 回调函数，用户可根据自己的规则判定是否允许修改名称。
3、如果 beforeRename 返回 false，则继续保持编辑名称状态，直到名称符合规则位置 （按下 ESC 键可取消编辑名称状态，恢复原名称）。
4、如果未设置 beforeRename 或 beforeRename 返回 true，则结束节点编辑名称状态，更新节点名称，并触发 setting.callback.onRename 回调函数。
默认值：true
true / false 分别表示 显示 / 隐藏 编辑名称按钮

4.setting.callback

beforeDrag:
用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
默认值：null
如果返回 false，zTree 将终止拖拽，也无法触发 onDrag / beforeDrop / onDrop 事件回调函数
onClick:
用于捕获节点被点击的事件回调函数

如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。
默认值：null

5.setting.async

enable：
设置 zTree 是否开启异步加载模式
默认值：false
true 表示 开启 异步加载模式
false 表示 关闭 异步加载模式
如果设置为 true，请务必设置 setting.async 内的其它参数。
如果需要根节点也异步加载，初始化时 treeNodes 参数设置为 null 即可
url：
Ajax 获取数据的 URL 地址。[setting.async.enable = true 时生效]
默认值：""
设置固定的异步加载 url 字符串，请注意地址的路径，确保页面能正常加载
url 内也可以带参数，这些参数就只能是通过 get 方式提交了，并且请注意进行转码
autoParam：
异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]
默认值：[ ]
1、将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"]
2、可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"]

当页面刚加载时，会调用zTreeOnClick方法到后台查询出所有的父级数据，暂时给用户。当用户点击父级看子级时，这时根据传入的数据异步加载到后台查询所有子级