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