您的位置：首页 > 其它

zTree学习笔记

2015-09-24 14:39 330 查看

记录一下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就慢慢容易了。其他的功能就可以逐步实习

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ztree 树格式后台

相关文章推荐

新的分享

章节导航