jquery插件treetable使用

一、插件描述：

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].checkRules=strsub(data[i].checkRules); */
            data[i].name=strsub(data[i].name);
            var row = data[i];
            //alert(data[i].area.name);
            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>

3.样式展示

注意事项：

1、在表格中展示树，每个tr 须拥有 data-tt-id 属性，且属性值必须唯一

2、每个子节点必须有一个 data-tt-parent-id 属性，data-tt-parent-id 的值必须等于父节点的data-tt-id 值

3、表格中行的展示必须按照树的展开顺序来，即传递过来的List必须是有序的，且与树展开后的顺序一致