第一步：
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>
用z-tree插件①带有父子关系的标准
zTreeNodes
举例:
Js代码
1.var zTreeNodes = [
2.{"id":1, "name":"test1", "nodes":[
3.{"id":11, "name":"test11", "nodes":[
4.{"id":111, "name":"test111"}
5."id":12, "name":"test12"}
②带有父子关系的简单
Array
格式
(isSimpleData)的zTreeNodes
举例：
Js代码
1.var treeNodes = [
2. {"id":1, "pId":0, "name":"test1"},
3.{"id":11, "pId":1, "name":"test11"},
4. {"id":12, "pId":1, "name":"test12"},
5. {"id":111, "pId":11, "name":"test111"},
例子：
(Java代码)
①在页面引用
zTree的js和css：
Html代码
1.
<!-- ZTree树形插件 -->
2.<link
rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type
="text/css">
3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"
></script>
然后根据鼠标左键在菜单坐标内按下放开的事件提取当前鼠标的x，y坐标，然后修改属性菜单的top和left属性 或者当鼠标在菜单坐标内按下之后触发鼠标的移动事件，然后在移动事件里设置菜单的top和left对应鼠标当前坐标y和x，这样当鼠标移动时菜单的坐标也会根本改变，实现同步移动
