第一步：
1.上官网下载。
2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css
第二步：建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家电</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---电视</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣机</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>
第三步：引入JS
/* 初始化数据 */
$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected")
$(this).toggleClass("selected")
})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>
<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>
首先在页面上有<ul/>标签
<ulid="tree"class="ztree"></ul>
2、定义ztree的配置参数
varsetting={
//check属性放在data属性之后，复选框不起作用
check:{
enable:true
},
data:{
simpleData:{
enable:true
},
}
}
核心参数：zTreeNodes
zTree
的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式
①带有父子关系的标准
zTreeNodes举例:
Js代码
varzTreeNodes=[
{"id":1,"name":"test1",
"nodes":[
{"id":11,"name":"test11","nodes":[
{"id":111,
"name":"test111"}
]},
{"id":12,"name":"test12"}
]},
......
]
②带有父子关系的简单Array格式(isSimpleData)的zTreeNodes举例：
Js代码
var
treeNodes=[
{"id":1,"pId":0,"name":"test1"},
{"id":11,"pId":1,
"name":"test11"},
{"id":12,"pId":1,"name":"test12"},
{"id":111,
"pId":11,"name":"test111"},
......
]
【实例一】(Java代码)
①在页面引用zTree的js和css：
Html代码
<!--ZTree树形插件
-->
<linkrel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<!--<linkrel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css"
type="text/css">-->
<scripttype="text/javascript"
src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
②在script脚本中定义setting和zTreeNodes
Java代码
varsetting={
isSimpleData:true,//数据是否采用简单Array格式，默认false
treeNodeKey:"id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey:"pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine:true,//是否显示节点间的连线
checkable
:true//每个节点上是否显示CheckBox
}
vartreeNodes=[
{"id":1,
"pId":0,"name":"test1"},
{"id":11,"pId":1,"name":"test11"},
{"id":12,
"pId":1,"name":"test12"},
{"id":111,"pId":11,"name":"test111"},
]
③在进入页面时生成树结构：
Js代码
varzTree
Js代码
$(function(){
zTree=
$("#tree").zTree(setting,treeNodes)
})
