第一步：
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>
简单写了一个，仅供参考<!doctype>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#tree li{}
#tree li ul{display:none}
</style>
<script type="text/javascript">
$(function(){
var $tree = $("#tree")//获取tree
var $a_tops = $tree.children("li").children("a")//找到tree下第一层菜单
$a_tops.bind("click", function(){//为第一层菜单绑定事件
var $this = $(this).next("ul")
if($this.length >0){//判断当前第一层菜单下是否有第二层菜单
$this.is(":hidden") ? $this.show() : $this.hide()//根据状态判断是隐藏还是现实第二层菜单
}
})
})
</script>
</head>
<body>
<ul id="tree">
<li><a href="javascript:void(0)">保险单管理</a>
<ul>
<li><a href="">添加报销单</a></li>
<li><a href="">审核报销单</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">我要采购</a>
<ul>
<li><a href="">信心收件箱</a></li>
<li><a href="">信心发件箱</a></li>
</ul>
</li>
</ul>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）