zTree学习笔记

来源：互联网发布：淘宝网运费险编辑：程序博客网时间：2024/05/21 11:10

记录一下zTree的使用
1，先导入需要的文件，我的demo是基于3.1的版本的，文件目录如下
这里写图片描述
ztree.all导入了以后，剩下的三个可以不导入。all就是把另外三个集合一起了
zTreeStyle文件下面是ztree需要的css和图片。这些东西都在ztree的开发包里面
ztree.js是我自己写的js文件。ztree.jsp是数据显示页面。
2，ztree.jsp导入需要的文件，定义放ztree的容器

<link rel="stylesheet" type="text/css" href="<%=path%>/ztree/zTreeStyle/zTreeStyle.css">  </head>  <body>        <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>  </body>  <script type="text/javascript" src="<%=path%>/ztree/js/jquery-1.4.4.min.js "></script>  <script type="text/javascript" src="<%=path%>/ztree/js/jquery.ztree.core-3.1.js "></script>  <script type="text/javascript" src="<%=path%>/ztree/js/jquery.ztree.excheck-3.1.js "></script>  <script type="text/javascript" src="<%=path%>/ztree/js/jquery.ztree.exedit-3.1.js "></script>  <script type="text/javascript" src="<%=path%>/ztree/ztree.js "></script>

导入这些文件以后，下面开始写js文件，ztree.js是主要对树的定义了
3，js文件

$(document).ready(function() {    //定义树的内容    var setting = {        //异步加载信息        async: {            enable : true,            type : "post",            url : "/basic/treeAction!getNodes.action",            //提交的数据信息。根据这些信息，可以返回对应节点下面的数据            autoParam : ["id", "name", "level"],            //这个信息可以不需要            otherParam : {"otherParam":"zTreeAsyncTest"},            //对节点做一些过滤            dataFilter : filter        },        //编辑功能        edit: {            enable: true,            //分别显示删除按钮和重命名按钮            showRemoveBtn: true,            showRenameBtn: true        },        //复选框        check : {            enable : true,            chkStyle : "checkbox",            //定义选择功能：节点选择以后对子父节点的影响            chkboxType : { "Y": "ps", "N": "ps" }        },        view : {            selectedMulti: true        },        data : {            //数据格式，简单数据格式            simpleData : {                enable : true            }        },        //回调函数，在点检删除和修改以后回调        callback : {            onRemove : removeNode,            onRename : renameNode        }    };    //初始化树    var MyTree = $.fn.zTree.init($("#tree"), setting);    //向后台提交请求修改节点信息    function renameNode(event, treeId, treeNode){        $.ajax({            type : "post",            url : "/basic/treeAction!updateNode.action",            data : {"id":treeNode.id,"name":treeNode.name},            success : function(resp){                var treeObj = $.fn.zTree.getZTreeObj("tree");                treeObj.reAsyncChildNodes(null, "refresh");            },            error : function(resp){            }        });    }    //删除节点    function removeNode(event, treeId, treeNode){        alert(treeId + treeNode.name);        $.ajax({            type : "post",            url : "/basic/treeAction!deleteNode.action",            data : {"id":treeNode.id},            success : function(resp){                //alert("success"+resp.msg);                //删除成功以后刷新树                var treeObj = $.fn.zTree.getZTreeObj("tree");                treeObj.reAsyncChildNodes(null, "refresh");            },            error : function(resp){                //alert("error"+resp.msg);            }        });    }    function filter(treeId, parentNode, childNodes) {        if (!childNodes) return null;        for (var i=0, l=childNodes.length; i<l; i++) {            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');        }        return childNodes;    };});

主要的功能就是上面的js实现的。后台是基于框架的简单增删改。就不在这里写出来了。
4，主要的问题
在写demo的时候遇到的几个问题说一下：
首先是关于ztree的数据格式，ztree的数据格式有两种。标准格式和简单格式。都在官方的文档给出了。
标准格式:

[            { name:"父节点1 - 展开", open:true,                children: [                    { name:"父节点11 - 折叠",                        children: [                            { name:"叶子节点111"},                            { name:"叶子节点112"},                            { name:"叶子节点113"},                            { name:"叶子节点114"}                        ]},                    { name:"父节点12 - 折叠",                        children: [                            { name:"叶子节点121"},                            { name:"叶子节点122"},                            { name:"叶子节点123"},                            { name:"叶子节点124"}                        ]},                    { name:"父节点13 - 没有子节点", isParent:true}                ]},            { name:"父节点2 - 没有子节点", isParent:true}        ];

这种格式很清晰的表示了节点的父子关系，一旦节点多了以后就显得很复杂。简单数据格式如下：

[{ id:1, pId:0, name:"父节点1 - 展开", open:true},{ id:11, pId:1, name:"父节点11 - 折叠"},{ id:111, pId:11, name:"叶子节点111"},{ id:112, pId:11, name:"叶子节点112"},{ id:113, pId:11, name:"叶子节点113"}]

简单格式通过id和pid来表示节点之间的父子关系，每一个节点对应一个bean，bean里面的字段就是id,pid,name等等的信息。比较简单。
ztree能解析的格式就按照这两种，是否要严格遵守不确定。
一开始从后台返回数据的时候采用的struts2配饰的形似，返回了如下数据解析不成功。

{"nodes":[{"id":1,"isParent":true,"name":"交通部","pId":0},{"id":2,"isParent":true,"name":"外交部","pId":0},{"id":3,"isParent":true,"name":"农业部","pId":0},{"id":7,"isParent":true,"name":"7","pId":0}]}

后台返回的是一个list，可能正是因为有前面的nodes在，解析总是不成功。报了一个ztree内部的replace方法错误。
于是改用response直接写了一个串到前台：

[{"id":1,"isParent":true,"name":"交通部","pId":0},{"id":2,"isParent":true,"name":"外交部","pId":0},{"id":3,"isParent":true,"name":"农业部","pId":0},{"id":7,"isParent":true,"name":"7","pId":0}]

这个时候就可以正常解析了。
这也是这两天学习ztree遇到的最大的一个问题吧。这里搞清楚看api就慢慢容易了。其他的功能就可以逐步实习

0 0