在工作中简单得使用了ztree, 为了以后便于翻阅,总结下
使用方法:
1,在页面中引入ztree的类库和样式文件。
<script type="text/javascript" src="/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/scripts/ztree/jquery.ztree.all-3.5.min.js"></script>
<link rel="stylesheet" href="/scripts/ztree/zTreeStyle.css"type="text/css">
2,在body中放入
<div id="tree">
<ul id="treeDemo" class="ztree"></ul>
</div>
3,定义配置属性
var zTree;
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式,默认false
treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下,当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true, //每个节点上是否显示 CheckBox
callback: {
onClick: leftClick//单击
}
};
var tree = ${departmentTree};//后台传递的Jsontree
4 ,最后加载Ztree
- 引入数据
zTree可以解析json格式的数据,有两种方式可以把数据传给zTree组件来生成树状结构:
1)直接把json数据传给组件。
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
2)异步获取json格式数据,第三个参数传null或者空着。
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, null);
});
使用demo
如果说使用上有什么需要注意的地方,那就是设置自己的层级关系字段了
var setting = {
data: {
key : {
title : "c01name", //鼠标悬停显示的信息
name : "c01name" //网页上显示出节点的名称
},
simpleData: {
enable: true,
idKey: "c01id", //修改默认的ID为自己的ID
pIdKey: "c01parentid",//修改默认父级ID为自己数据的父级ID
rootPId: 000 //根节点的ID
}
}
};
有时候异步处理得到的数据并不是一个单纯的jsonarray数据,我们需要对他进行一个简单的提取操作:
var setting = {
async: {
enable: true,//采用异步加载
dataFilter: ajaxDataFilter, //预处理数据
url : "http://127.0.0.1/WeChat/admin/C01Action_listC01.action",
dataType : "json"
},
data : {
key : {
title : "c01name",
name : "c01name"
},
simpleData : {
enable : true,
idKey : "c01id",
pIdKey : "c01parentid",
rootPid : 000
}
},
callback : {
beforeClick: zTreeBeforeClick,
onClick : zTreeOnClick,
onAsyncSuccess: zTreeOnAsyncSuccess //异步加载完成调用
}
};
/* 获取返回的数据,进行预操作 */
function ajaxDataFilter(treeId, parentNode, responseData) {
responseData = responseData.jsonArray;
return responseData;
};
//异步加载完成时运行,此方法将所有的节点打开
function zTreeOnAsyncSuccess(event, treeId, msg) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(true);
}
发起请求得到的数据包含一个jsonArray和一些其他字段,通过dataFilter先将数据处理一下,得到这个需要的json数据再做处理。
在业务中可能会遇到要将所有节点打开的需求,这里有两种实现的方法,一种是在返回数据的时候,给父节点添加“open:true”字段;另一种方式是根据树的ID,打开它的所有节点,这里又分为静态和异步两种情况:
- 静态获取节点数据
根据树的ID直接打开所有子节点。 - 异步获取节点数据
利用回调函数,在树加载完成的时候调用方法,根据树的ID打开它的所有节点。
另附zTreeAPI文档地址:[http://www.treejs.cn/v3/api.php ]相当详细