1.上官网下载，treetable插件提供了历史版本，我这里使用的是最新的3.1.0的版本
2.插件引用，当你下载的时候，会有很多个文件，但是根据他们的api来看，如果你只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件。后面如果有更复杂的效果，到时候再说。同样，如果你想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css，这两个文件的作用我后面会说明。
3.简单的demo。
首先，新建一个网页，引入上述文件，简单的搭建一个表格
<table id="example-advanced">
<tr>
<td>app</td>
</tr>
<tr>
<td>controllers</td>
</tr>
<tr>
<td>application_controller.rb</td>
</tr>
<tr>
<td>helpers</td>
</tr>
<tr>
<td>models</td>
</tr>
<tr>
<td>views</td>
</tr>
</table>
为说明样式问题，我这里暂时不引入css样式。那么正常情况下，就是一行行的文字。
现在，引入treeable.js。当然单纯的引入是不会出任何效果的，这里要对具体的表格进行修改，没有定义逻辑时，这些tr是一行行显示，但是一旦运用了插件自定义的data属性后，就会出现不一样的世界……。
4.写具体的js：只需要一句话
$("#example-advanced").treetable({ expandable: true })；
然后，修改给table添加自定义属性
<table id="example-advanced">
<tr data-tt-id="0">
<td>app</td>
</tr>
<tr data-tt-id="1" data-tt-parent-id="0">
<td>controllers</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>application_controller.rb</td>
</tr>
<tr data-tt-id="2" >
<td>helpers</td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>models</td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>views</td>
</tr>
</table>
相信看名字大家就能大概猜出来这个属性的意思了，没错，我们给每个元素行添加data-tt-id，并自定义命名就可以了，这里为了逻辑清楚我用的是数字，如果想让某一行扮演“父亲”的角色，只要给它的“儿子”贴上属于哪一个爹的标签id就行了，就像上面data-tt-parent-id="2",就像这样，那么原本属于同一行级别的元素就会有变化，如下：
看出来了吗？原本属于同一层的元素在应用插件后就属于不同层级了。
5.接下来说一下样式的问题，在我所展示的最终效果图，会有一个默认的背景，这里是因为应用了jquery.treetable.theme.default.css这个样式，引入该样式后，效果如下：
你可能还注意到，最终效果左侧父级会有一个箭头，这是因为要将jquery.treetable.css样式引入，引入后表现如下：
写到这里简单的效果已经出来了，接下来，我们看一下query.treetable.css这里面的内容：
可以看出，通过该css配合插件的js使用，我们在每一个有折叠项的前面增加了一个span标签来表现小三角形
6.之后就是一些优化的问题，比如通过js让选中的父级高亮等，官方文档有说明，不在赘述，代码类似如下：
// Highlight selected row
$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
7.其他问题补遗，最终效果的右侧是有图标的，我们可以先看看官网中这个图标是怎么来的
可以看出这是在文字前面添加了一个span标签，并运用folder样式，那么这个样式在哪？其实，它就在query.treetable.theme.default.css中，因为内容太多，所以我就只截一部分图
可以看出这是应用了一个编译好的图片，类似的class还有好多，这里不在列举。加入以后效果大概如下：
最后，还有一个问题，那就是最终效果提供了一个展开和关闭的按钮，这在官方文档中有实例，你只要把它们添进来就行了
<a href="#" οnclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开</a>
<a href="#" οnclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭l</a>
怎么样，现在你对jquery treetable插件应该有个大概的了解了吧，其实只要正确引入相应css和js并应用定义好的方法，一切就变得很简单了。
当然，我这里的最终效果是配合bootstrap中的表格写的，毕竟公司要求吗，不过是一样有效的哦。除此之外，treetable还可以配合jquery ui插件实现树内元素的随意拖拽排序，也可以调用ajax方法，这些官方文档都有api我就不再深入探讨啦。各位看官可自行去折腾一下。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 4 <c:set var="ctx" value="${pageContext.request.contextPath}" /> 5 <c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" /> 6 <html> 7 <head> 8 <title>jQuery treetable</title> 9 10 <script src="${ctxStatic}/ui/js/jquery.min.js?v=2.1.4"></script> 11 <link rel="stylesheet" 12 href="${ctxStatic}/plug/treetable/stylesheets/jquery.treetable.css" /> 13 <link rel="stylesheet" 14 href="${ctxStatic}/plug/treetable/stylesheets/jquery.treetable.theme.default.css" /> 15 <script src="${ctxStatic}/plug/treetable/jquery.treetable.js"></script> 16 17 <script type="text/javascript"> 18 $(document).ready(function(){ 19 $("#example-advanced").treetable({ 20 expandable : true 21 }); 22 //选中行高光 23 $("#example-advanced tbody").on("mousedown", "tr", function() { 24 25 $(".selected").not(this).removeClass("selected"); 26 27 $(this).toggleClass("selected"); 28 29 }); 30 }); 31 32 </script> 33 34 </head> 35 36 37 <body> 38 <a href="#" οnclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开</a> 39 40 <a href="#" οnclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭</a> 41 42 <table id="example-advanced"> 43 <tr data-tt-id="0"> 44 <td>app</td> 45 </tr> 46 <tr data-tt-id="1" data-tt-parent-id="0"> 47 <td>controllers</td> 48 </tr> 49 <tr data-tt-id="1-1" data-tt-parent-id="1"> 50 <td>application_controller.rb</td> 51 </tr> 52 53 <tr data-tt-id="2" data-tt-parent-id="0"> 54 <td>helpers</td> 55 </tr> 56 57 <tr data-tt-id="2-1" data-tt-parent-id="2"> 58 <td>models</td> 59 </tr> 60 <tr data-tt-id="2-1" data-tt-parent-id="2"> 61 <td>views</td> 62 </tr> 63 </table> 64 </body> 65 </html>
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
