0.1 zTree文件介绍
从zTree官网下载的zTree包括以下组成部分
•metroStyle文件夹:zTree的metro风格样式相关文件(图片及css样式表)。
•zTreeStyle文件夹:zTree的标准风格样式文件夹(图片及css样式表)
•js文件:zTree.all.js是完整的js库,可单纯加载此文件实现所有zTree功能,ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割,分别对应基本功能、复选功能、编辑功能、显隐功能。
1 zTree的基本使用
1.0 zTree的创建
在页面中添加对zTree的js及css引用,由于zTree基于JQuery,JQuery的引用是必须的。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
var setting = {}; // zTree 的参数配置,后面详解
var zNodes = [ // zTree 的数据属性,此处使用标准json格式
{
name: "test1", open: true, children: [
{ name: "test1_1" }, { name: "test1_2" }]
},
{
name: "test2", open: true, children: [
{ name: "test2_1" }, { name: "test2_2" }]
}
];
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree,三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
1.1 zTree的配置
zTree的配置采用Json格式,按照配置的类型分为view(可视界面相关配置)、data(数据相关配置)、check(复选框相关配置)、callback(各类事件的回调函数配置)、async(zTree异步加载配置),一下是我们经常会使用到的一些配置及说明,其他详细配置可以参考zTree官方API文档的详细介绍。
var setting = { view: { selectedMulti: true, //设置是否能够同时选中多个节点 showIcon: true, //设置是否显示节点图标 showLine: true, //设置是否显示节点与节点之间的连线 showTitle: true, //设置是否显示节点的title提示信息 }, data: { simpleData: { enable: false, //设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式) idKey: "id", //设置启用简单数据格式时id对应的属性名称 pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构 } }, check:{ enable: true //设置是否显示checkbox复选框 }, callback: { onClick: onClick, //定义节点单击事件回调函数 onRightClick: OnRightClick, //定义节点右键单击事件回调函数 beforeRename: beforeRename, //定义节点重新编辑成功前回调函数,一般用于节点编辑时判断输入的节点名称是否合法 onDblClick: onDblClick, //定义节点双击事件回调函数 onCheck: onCheck //定义节点复选框选中或取消选中事件的回调函数 }, async: { enable: true, //设置启用异步加载 type: "get", //异步加载类型:post和get contentType: "