以前用到过ZTREE做树形展示，当时没有总结，今天简单总结一下，以后用的时候也好找，废话不多说，下面开始。
1、ztree简介
ztree是依靠jquery实现的一个树形插件，是一个开源的插件，兼容IE/FF/CHROM/OPERA这些常用的浏览器，支持JSON数据以及AJAX异步加载节点数据，提供多种事件回调函数，其实说了一大堆就是想说一句话，这是个比较好用的树形结构展示插件。
2、使用
2.0 项目环境
2.0.1 数据库表
2.1 引入的文件
2.1.1 JS文件
a. jquery-1.4.2.js 或其他更高版本的 jQuery ;
b. jquery-ztree.core-3.0.js,如果需要用到编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js;
c.根据需求添加其他JS文件。
2.1.2 CSS文件
a. zTreeStyle.css;
b. zTreeStyle 目录下的 img 文件；
c.根据需求引入其他CSS文件；
2.2 初始化
2.2.1 页面
在页面上需要有一个承载tree的容器，并且要设置该容器的className为ztree，如下所示：
<ul id="tree" class="ztree"></ul>
ztree" 这个 className，可以根据需要随意修改，别忘了修改 css 中对应名字就是了，对于容器如果需要增加其他特殊样式，可根据自己的需要进行修改。
2.2.2 JS初始化
$.fn.zTree.init($("#tree"), setting);
init方法中可以有三个参数，第一个参数表示tree的承载容器对象，第二个参数表示ztree的配置数据，也就是初始化参数，第三个参数zNodes表示ztree的节点数据，因为在本文中使用异步加载的方式加载数据，因此第三个参数为空。
此方法的返回值即为ztree对象，提供操作ztree的各种方法，对于通过js操作ztree来说必须通过此对象，如果没有设置的话，可以使用 $.fn.zTree.getZTreeObj方法随时获取，获取方式为：
treeObj = $.fn.zTree.getZTreeObj("tree");
2.2.3 setting设置
2.2.3.1 async
async : {
enable : true,
url : asyncURL,
type : "post",
dataType : "text",
autoParam : ["id=pid"],
// otherParam : ["type"],
dataFilter : toArray
},
async表示异步加载时需要向后台传递的参数。
enable：设置ztree是否开启异步加载模式，布尔类型，默认为false;如果设置为 true，请务必设置 setting.async 内的其它参数。如果需要根节点也异步加载，初始化时 treeNodes 参数设置为 null 即可。
url:Ajax 获取数据的 URL 地址;enable为true时生效；url 内也可以带参数，这些参数就只能是通过 get 方式提交了，并且请注意进行转码；
type：ajax的http请求模式，默认值为post；
dataType ：Ajax 获取的数据类型；
autoParam：异步加载时需要自动提交父节点属性的参数，默认为[]，将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"],可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"];
dataFilter :用于对 Ajax 返回数据进行预处理的函数,返回值是 zTree 支持的JSON 数据结构即可。
/**
* transfer the post data to array adapted to displaying the zTree
* 将异步过来的JSON数据，进行处理，符合Ztree的显示
*/
function toArray (treeId, pNode, datas) {
if(!datas || datas.length == 0){
//alert("no datas");
return null;
}
var len = datas.length;
var array = new Array();
for(var i = 0; i < len; i++){
if(datas[i].type != "f"){
datas[i].isParent = true;
}
if(pNode){
datas[i].checked = datas[i].checked || pNode.checked;
}
array.push(datas[i]);
}
return array;
}
此函数的三个参数，treeId对应ztree的treeid,pNode表示进行异步加载的父节点json数据对象，对根进行异步加载时，pNode = null,datas表示异步加载获取到的数据转换后的Array(JSON)、JSON、String数据对象。
2.2.3.1.1 后台代码
private Integer pid;
public String getChildren(){
if(pid == null){
pid = SessionUtils.getCurrentRequireFromSession(request).getId();
}
List<SystemModule> list = nodeService.getNodeChildren(pid);
String json = new Gson().toJson(list);
try {
response.setContentType("text/plain");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(json);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
2.2.3.2 check
/*outlook style should not include the check, you mustn‘t set the check configuration outLook 风格不能有check选择的配置，否则会有左侧按钮的重叠*/
check : {
autoCheckTrigger : false, // automatically trigger the check functions: beforeCheck and onCheck
chkboxType : {"Y" : "ps","N" : "ps"},
chkStyle : "checkbox",
enable : true,
nocheckInherit : false,
chkDisabledInherit : false,
radioType : "level"
},
chkboxType:勾选 checkbox 对于父子节点的关联关系,setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效;Y 属性定义 checkbox 被勾选后的情况,N 属性定义 checkbox 取消勾选后的情况,"p" 表示操作会影响父级节点,"s" 表示操作会影响子级节点,注意大小写，改变后出错。
autoCheckTrigger：设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数，这里设置为不触发；
chkStyle：表示勾选框类型，checkbox或者radio，默认为checkbox,此时显示 checkbox 选择框，setting.check.chkboxType 属性有效；chkStyle = "radio" 时，显示 radio 选择框， setting.check.radioType 属性有效。注意大小写。
enable：设置 zTree 的节点上是否显示 checkbox / radio，默认值为false；
nocheckInherit：当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true；true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。false 表示 新加入子节点时，不继承父节点 nocheck 的属性。默认值为false;
chkDisabledInherit:当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true；
radioType：radio 的分组范围，默认为level,radioType = "level" 时，在每一级节点范围内当做一个分组,radioType = "all" 时，在整棵树范围内当做一个分组.
标红色的两个必须设置，其他的根据需要设置即可。
2.2.3.3 view
view: {
// addDiyDom : outLookStyle,
// addHoverDom: addHoverDom,// mouse float
// removeHoverDom: removeHoverDom,// mouse float
autoCancelSelected : false,
dblClickExpand : true,
// expandSpeed : "slow",// tree expand speed
fontCss : setFontCss,
// nameIsHTML : false,
selectedMulti: false,
showIcon : false,
showLine : false,
showTitle : false,
txtSelectedEnable : true
},
上面注掉的是暂时用不到的，如果想用的话可以自己查一下API加上即可，主要介绍一下没有注掉的那些功能：
autoCancelSelected ：点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。其实我也没感觉有什么用，默认值为true，如果不需要此功能可以设置为false,此处设置为false;
dblClickExpand :双击节点时，是否自动展开父节点的标识，boolean类型，默认为true;什么意思呢，其实就是如果一个节点有下级节点，双击此节点时，如果是展开的，那么会折叠，反之亦然；
fontCss ：个性化文字样式，只针对 zTree 在节点上显示的<A>对象。默认值为{},JSON 格式为 JQuery css方法中的 JSON 对象格式，例如：{color:"#ff0011", background:"blue"}，此处可以使用函数来设置：
/** set the CSS style for every different node
* 为每一个节点设置不同的CSS样式
* @param treeId
* @param treeNode
*/
var cssJson = {color:"red"};
function setFontCss(treeId, treeNode) {
if(treeNode.level == 0){
cssJson.color = "red";
} else if(treeNode.level == 1){
cssJson.color = "blue";
} else if(treeNode.level == 2){
cssJson.color = "green";
} else {
cssJson.color = "red";
}
return cssJson;
};
selectedMulti：设置是否允许同时选中多个节点。默认值为true,设置为 true时，按下 Ctrl 或 Cmd 键可以选中多个节点，此处禁用；
showIcon：设置 zTree 是否显示节点的图标。默认为true,这里为了追求简单就没有加ICON,喜欢的同学可以自己加上去，也可以使用函数设置ICON,返回值是布尔类型的；
showLine：设置 zTree 是否显示节点之间的连线。默认值为true，显示节点之间的连线；
showTitle:设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。请务必与 setting.data.key.title 同时使用。默认值：true,不需要显示提示信息的话就无视吧；
txtSelectedEnable：设置 zTree 是否允许可以选择 zTree DOM 内的文本。默认为false；
2.2.3.4 data
data: {
keep : {
leaf : true,// children lock
parent : true// parent lock
},
key : {
children : "child",
name : "name",
title : "ufp",
},
simpleData: {
enable: true
}
},
leaf：zTree 的节点叶子节点属性锁，是否始终保持 isParent = false，默认为false,如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点。什么意思呢，意思就是只要你是孙子，一辈子都是孙子，什么时候你也变不成老子，就是这样；
parent：zTree 的节点父节点属性锁，是否始终保持 isParent = true，跟上边意思差不多；
children：zTree 节点数据中保存子节点数据的属性名称。
name:zTree 节点数据保存节点名称的属性名称。默认值是name;
title:zTree 节点数据保存节点提示信息的属性名称。如果设置为 "" ，则自动与 setting.data.key.name 保持一致，避免用户反复设置,，默认值是"";[setting.view.showTitle = true 时生效]
enable:确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array),不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式,默认值：false,如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
2.2.3.5 edit
edit : {
enable : true,
showRemoveBtn : false,
showRenameBtn : false,
drag : {
isCopy : true,
isMove : false,
prev : true,
inner : true,
next : true,
},
},
enable:设置 zTree 是否处于编辑状态,请在初始化之前设置，初始化后需要改变编辑状态请使用 zTreeObj.setEditable() 方法,默认值: false;点击节点时，不会打开 node.url 指定的 URL;全面支持 编辑 与 异步加载 状态共存;可以对节点进行拖拽，且支持多棵树之间进行拖拽;支持拖拽时 复制/移动 节点;可以通过编辑按钮修改 name 属性;可以通过删除按钮删除节点。
showRemoveBtn:设置是否显示删除按钮，默认值：true;当点击某节点的删除按钮时：
1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。
2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发setting.callback.onRemove 回调函数。
showRenameBtn：设置是否显示编辑名称按钮，默认值：true；
drag：拖拽时的属性；
isCopy:拖拽时, 设置是否允许复制节点;
isMove:拖拽时, 设置是否允许移动节点;
1、isCopy = true; isMove = true 时，拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move
2、isCopy = true; isMove = false 时，所有拖拽操作都是 copy
3、isCopy = false; isMove = true 时，所有拖拽操作都是 move
4、isCopy = false; isMove = false 时，禁止拖拽操作
又有事了，先写到这，下次接着写。