ztree入门应用总结

最新推荐文章于 2024-09-14 06:24:50 发布

简单的绿竹

最新推荐文章于 2024-09-14 06:24:50 发布

阅读量1.8k

点赞数

分类专栏： Jquery JS

JS 同时被 2 个专栏收录

122 篇文章 0 订阅

订阅专栏

Jquery

45 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/liaidai/p/4739417.html

以前用到过ZTREE做树形展示，当时没有总结，今天简单总结一下，以后用的时候也好找，废话不多说，下面开始。

1、ztree简介

　　ztree是依靠jquery实现的一个树形插件，是一个开源的插件，兼容IE/FF/CHROM/OPERA这些常用的浏览器，支持JSON数据以及AJAX异步加载节点数据，提供多种事件回调函数，其实说了一大堆就是想说一句话，这是个比较好用的树形结构展示插件。

2、使用

2.0 项目环境

2.0.1 数据库表

2.1 引入的文件

2.1.1 JS文件

a. jquery-1.4.2.js 或其他更高版本的 jQuery ;

b. jquery-ztree.core-3.0.js,如果需要用到编辑功能或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js;
c.根据需求添加其他JS文件。

2.1.2 CSS文件

a. zTreeStyle.css;

b. zTreeStyle 目录下的 img 文件；

c.根据需求引入其他CSS文件；

2.2 初始化

2.2.1 页面

　　在页面上需要有一个承载tree的容器，并且要设置该容器的className为ztree，如下所示：

<ul id="tree" class="ztree"></ul>

　　ztree" 这个 className，可以根据需要随意修改，别忘了修改 css 中对应名字就是了，对于容器如果需要增加其他特殊样式，可根据自己的需要进行修改。

2.2.2 JS初始化

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

　　init方法中可以有三个参数，第一个参数表示tree的承载容器对象，第二个参数表示ztree的配置数据，也就是初始化参数，第三个参数zNodes表示ztree的节点数据，因为在本文中使用异步加载的方式加载数据，因此第三个参数为空。

　　此方法的返回值即为ztree对象，提供操作ztree的各种方法，对于通过js操作ztree来说必须通过此对象，如果没有设置的话，可以使用 $.fn.zTree.getZTreeObj方法随时获取，获取方式为：

treeObj = $.fn.zTree.getZTreeObj("tree");

2.2.3 setting设置

2.2.3.1 async

async : {
        enable : true,
        url : asyncURL,
        type : "post",
        dataType : "text",
        autoParam : ["id=pid"],
//        otherParam : ["type"],
        dataFilter : toArray
    },

　　async表示异步加载时需要向后台传递的参数。

　　enable：设置ztree是否开启异步加载模式，布尔类型，默认为false;如果设置为 true，请务必设置 setting.async 内的其它参数。如果需要根节点也异步加载，初始化时 treeNodes 参数设置为 null 即可。

　　url:Ajax 获取数据的 URL 地址;enable为true时生效；url 内也可以带参数，这些参数就只能是通过 get 方式提交了，并且请注意进行转码；

　　type：ajax的http请求模式，默认值为post；

　　dataType ：Ajax 获取的数据类型；

　　autoParam：异步加载时需要自动提交父节点属性的参数，默认为[]，将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"],可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"];

　　dataFilter :用于对 Ajax 返回数据进行预处理的函数,返回值是 zTree 支持的JSON 数据结构即可。

/**
 * transfer the post data to array adapted to displaying the zTree
 * 将异步过来的JSON数据，进行处理，符合Ztree的显示
 */
function toArray (treeId, pNode, datas) {
    if(!datas || datas.length == 0){
        //alert("no datas");
        return null;
    }
    var len = datas.length;
    var array = new Array();
    for(var i = 0; i < len; i++){
        if(datas[i].type != "f"){
            datas[i].isParent = true;
        }
        if(pNode){
            datas[i].checked = datas[i].checked || pNode.checked;
        }
        array.push(datas[i]);
    }
    return array;
}

　　此函数的三个参数，treeId对应ztree的treeid,pNode表示进行异步加载的父节点json数据对象，对根进行异步加载时，pNode = null,datas表示异步加载获取到的数据转换后的Array(JSON)、JSON、String数据对象。

2.2.3.1.1 后台代码

private Integer pid;

public String getChildren(){
        if(pid == null){
            pid = SessionUtils.getCurrentRequireFromSession(request).getId();
        }
        List<SystemModule> list = nodeService.getNodeChildren(pid);
        String json = new Gson().toJson(list);
        
        try {
            response.setContentType("text/plain");
            response.setCharacterEncoding("utf-8");
            PrintWriter out = response.getWriter();
            out.print(json);
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return null;
    }

2.2.3.2 check

/*outlook style should not include the check, you mustn't set the check configuration outLook 风格不能有check选择的配置，否则会有左侧按钮的重叠*/
    check : {
        autoCheckTrigger : false, // automatically trigger the check functions: beforeCheck and onCheck
        chkboxType : {"Y" : "ps","N" : "ps"},
        chkStyle : "checkbox",
        enable : true,
        nocheckInherit : false,
        chkDisabledInherit : false,
        radioType : "level"
    },

　　chkboxType:勾选 checkbox 对于父子节点的关联关系,setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效;Y 属性定义 checkbox 被勾选后的情况,N 属性定义 checkbox 取消勾选后的情况,"p" 表示操作会影响父级节点,"s" 表示操作会影响子级节点,注意大小写，改变后出错。

　　autoCheckTrigger：设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数，这里设置为不触发；

　　chkStyle：表示勾选框类型，checkbox或者radio，默认为checkbox,此时显示 checkbox 选择框，setting.check.chkboxType 属性有效；chkStyle = "radio" 时，显示 radio 选择框， setting.check.radioType 属性有效。注意大小写。

　　enable：设置 zTree 的节点上是否显示 checkbox / radio，默认值为false；

　　nocheckInherit：当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true；true 表示新加入子节点时，自动继承父节点 nocheck = true 的属性。false 表示新加入子节点时，不继承父节点 nocheck 的属性。默认值为false;

　　chkDisabledInherit:当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true；

　　radioType：radio 的分组范围，默认为level,radioType = "level" 时，在每一级节点范围内当做一个分组,radioType = "all" 时，在整棵树范围内当做一个分组.

　　标红色的两个必须设置，其他的根据需要设置即可。

2.2.3.3 view

view: {
//        addDiyDom : outLookStyle,
//        addHoverDom: addHoverDom,// mouse float
//        removeHoverDom: removeHoverDom,// mouse float
        autoCancelSelected : false,
        dblClickExpand : true,
//        expandSpeed : "slow",// tree expand speed
        fontCss : setFontCss,
//        nameIsHTML : false,
        selectedMulti: false,
        showIcon : false,
        showLine : false,
        showTitle : false,
        txtSelectedEnable : true
    },

　　上面注掉的是暂时用不到的，如果想用的话可以自己查一下API加上即可，主要介绍一下没有注掉的那些功能：

autoCancelSelected ：点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。其实我也没感觉有什么用，默认值为true，如果不需要此功能可以设置为false,此处设置为false;

dblClickExpand :双击节点时，是否自动展开父节点的标识，boolean类型，默认为true;什么意思呢，其实就是如果一个节点有下级节点，双击此节点时，如果是展开的，那么会折叠，反之亦然；

fontCss ：个性化文字样式，只针对 zTree 在节点上显示的<A>对象。默认值为{},JSON 格式为 JQuery css方法中的 JSON 对象格式，例如：{color:"#ff0011", background:"blue"}，此处可以使用函数来设置：

/** set the CSS style for every different node
 * 为每一个节点设置不同的CSS样式 
 * @param treeId
 * @param treeNode
 */
var cssJson = {color:"red"};
function setFontCss(treeId, treeNode) {
    if(treeNode.level == 0){
        cssJson.color = "red";
    } else if(treeNode.level == 1){
        cssJson.color = "blue";
    } else if(treeNode.level == 2){
        cssJson.color = "green";
    } else {
        cssJson.color = "red";
    }
    return cssJson;
};

　　selectedMulti：设置是否允许同时选中多个节点。默认值为true,设置为 true时，按下 Ctrl 或 Cmd 键可以选中多个节点，此处禁用；

　　showIcon：设置 zTree 是否显示节点的图标。默认为true,这里为了追求简单就没有加ICON,喜欢的同学可以自己加上去，也可以使用函数设置ICON,返回值是布尔类型的；

　　showLine：设置 zTree 是否显示节点之间的连线。默认值为true，显示节点之间的连线；

　　showTitle:设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。请务必与 setting.data.key.title 同时使用。默认值：true,不需要显示提示信息的话就无视吧；

　　txtSelectedEnable：设置 zTree 是否允许可以选择 zTree DOM 内的文本。默认为false；

2.2.3.4 data

data: {
        keep : {
            leaf : true,// children lock
            parent : true// parent lock
        },
        key : {
            children : "child",
            name : "name",
            title : "ufp",
        },
        simpleData: {
            enable: true
        }
    },

　　leaf：zTree 的节点叶子节点属性锁，是否始终保持 isParent = false，默认为false,如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点。什么意思呢，意思就是只要你是孙子，一辈子都是孙子，什么时候你也变不成老子，就是这样；

　　parent：zTree 的节点父节点属性锁，是否始终保持 isParent = true，跟上边意思差不多；

　　children：zTree 节点数据中保存子节点数据的属性名称。

　　name:zTree 节点数据保存节点名称的属性名称。默认值是name;

　　title:zTree 节点数据保存节点提示信息的属性名称。如果设置为 "" ，则自动与 setting.data.key.name 保持一致，避免用户反复设置,，默认值是"";[setting.view.showTitle = true 时生效]

　　enable:确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array),不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式,默认值：false,如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。

　　2.2.3.5 edit

edit : {
        enable : true,
        showRemoveBtn : false,
        showRenameBtn : false,
        drag : {
            isCopy : true,
            isMove : false,
            prev : true,
            inner : true,
            next : true,
        },
    },

　　enable:设置 zTree 是否处于编辑状态,请在初始化之前设置，初始化后需要改变编辑状态请使用 zTreeObj.setEditable() 方法,默认值: false;点击节点时，不会打开 node.url 指定的 URL;全面支持编辑与异步加载状态共存;可以对节点进行拖拽，且支持多棵树之间进行拖拽;支持拖拽时复制/移动节点;可以通过编辑按钮修改 name 属性;可以通过删除按钮删除节点。

　　showRemoveBtn:设置是否显示删除按钮，默认值：true;当点击某节点的删除按钮时：

　　　　1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。

　　　　2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发setting.callback.onRemove 回调函数。

　　showRenameBtn：设置是否显示编辑名称按钮，默认值：true；

　　drag：拖拽时的属性；

　　isCopy:拖拽时, 设置是否允许复制节点;

　　isMove:拖拽时, 设置是否允许移动节点;

　　　　1、isCopy = true; isMove = true 时，拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move

　　　　2、isCopy = true; isMove = false 时，所有拖拽操作都是 copy

　　　　3、isCopy = false; isMove = true 时，所有拖拽操作都是 move

　　　　4、isCopy = false; isMove = false 时，禁止拖拽操作