一、插件描述：
jQuery-treetable是一个jQuery插件。有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。它使HTML文件干净的，展现出树状表格插件，你只需要添加特定的数据格式。它是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。
二、属性表简介：
|
Setting |
Type |
Default |
Description |
|
branchAttr |
string |
“ttBranch” |
可选，强制打开节点的展开图标，允许将一个没有儿子节点的节点定义为分支节点，在HTML里面以data-tt-branch 属性形式展现. |
|
clickableNodeNames |
bool |
false |
默认false，点击展开图标打开子节点。设置为true时，点击节点名称也打开子节点. |
|
column |
int |
0 |
表中要展示为树的列数。 |
|
columnElType |
string |
“td” |
展示为树的单元格的类别(th,td or both). |
|
expandable |
bool |
false |
树是否可以展开，可以展开的树包含展开/折叠按钮。 |
|
expanderTemplate |
string |
<a href=”#”> </a> |
展开按钮的html 片段。 |
|
indent |
int |
19 |
每个分支缩进的像素数。 |
|
indenterTemplate |
string |
<span class=”indenter”></span> |
折叠按钮的HTML片段 |
|
initialState |
string |
“collapsed” |
初始状态，可选值: “expanded” or “collapsed”. |
|
nodeIdAttr |
string |
“ttId” |
用来识别节点的数据属性的名称。在HTML里面以 data-tt-id 体现。 |
|
parentIdAttr |
string |
“ttParentId” |
用了设置父节点的数据属性的名称. 在HTML里面以data-tt-parent-id 体现。 |
|
stringCollapse |
string |
“Collapse” |
折叠按钮的title,国际化使用。 |
|
stringExpand |
string |
“Expand” |
展开按钮的title,国际化使用。 |
三、函数简介：
|
Setting |
Type |
Default |
Description |
|
onInitialized |
function |
null |
树初始化完毕后的回调函数. |
|
onNodeCollapse |
function |
null |
节点折叠时的回调函数. |
|
onNodeExpand |
function |
null |
节点展开时的回调函数. |
|
onNodeInitialized |
function |
null |
节点初始化完毕后的回调函数 |
四、项目应用：
1.数据格式：
第一列为每条数据的id，第二列为该条数据的parentid，第三列是具体的内容
2.页面
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>巡查项管理</title>
<meta name="decorator" content="default"/>
//特别注意，需要引入的js
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
var data = ${fns:toJson(page)}, rootId = "${not empty inspectItemsTempLak.id ? inspectItemsTempLak.id : '0'}";
addRow("#treeTableList", tpl, data, rootId, true);
$("#treeTable").treeTable({expandLevel : 4});//默认展开的层级
});
function addRow(list, tpl, data, pid, root){
for (var i=0; i<data.length; i++){
data[i].name=strsub(data[i].name);
var row = data[i];
if ((${fns:jsGetVal('row.parentId')}) == pid){
$(list).append(Mustache.render(tpl, { pid: (root?0:pid), row: row}) );
addRow(list, tpl, data, row.id);
}
}
}
function strsub(str){
if(str!= null && str.length>25){
return str.substring(0,25)+"...";
}else{
return str;
}
}
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/inspect/items/inspectItemsTempLak/list? id=${inspectItemsTempLak.id}&parentIds=${inspectItemsTempLak.parentIds}">项列表</a></li>
<li><a href="${ctx}/inspect/items/inspectItemsTempLak/form?parent.id=0" style="float:left; margin-top:3px; margin-left:5px" class="btn btn-success">添加版本</a></li>
</ul>
<sys:message content="${message}"/>
<table id="treeTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>项目</th>
<th>检查标准</th>
<th>分数</th>
<th>操作</th>
</tr>
</thead>
<tbody id="treeTableList">
</tbody>
</table>
<script type="text/template" id="treeTableTpl">
<tr id="{{row.id}}" pId="{{pid}}">
<td width="400px"><a href="${ctx}/inspect/items/inspectItemsTempLak/form?id={{row.id}}">{{row.name}}</a></td>
<td >{{row.checkRules}}</td>
<td width="40px">{{row.score}}</td>
<td width="150px">
<a href="${ctx}/inspect/items/inspectItemsTempLak/form?id={{row.id}}">修改</a>
<a href="${ctx}/inspect/items/inspectItemsTempLak/delete?id={{row.id}}" onclick="return confirmx('要删除该项目及所有子项目吗？', this.href)">删除</a>
<a href="${ctx}/inspect/items/inspectItemsTempLak/form?parent.id={{row.id}}&parent.name={{row.name}}">添加下级项目</a>
</td>
</tr>
</script>
</body>
</html>3.样式展示
注意事项：
1、 在表格中展示树，每个tr 须拥有 data-tt-id 属性，且属性值必须唯一
2、每个子节点必须有一个 data-tt-parent-id 属性，data-tt-parent-id 的值必须等于 父节点的data-tt-id 值
3、 表格中行的展示必须按照树的展开顺序来，即传递过来的List必须是有序的，且与树展开后的顺序一致