Usage

1 GitHub 地址 https://github.com/ludo/jquery-treetable/

2 API 地址 http://ludo.cubicphuse.nl/jquery-treetable/

3 jQuery 官网链接 http://plugins.jquery.com/treetable/

引入代码：

<link href="path/to/jquery.treetable.css" rel="stylesheet" type="text/css" /> <script src="path/to/jquery.treetable.js"></script> <script> $("#your_table_id").treetable(); </script>

注意事项：

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

When you pasted the above code and adjusted it to reflect your situation, you enabled the possibility of displaying a tree in your table. To make the tree actually display as a tree you have to add data-tt-id and data-tt-parent-id attributes to your table rows (tr).

2  每个子节点必须有一个 data-tt-parent-id  属性，data-tt-parent-id 的值必须等于 父节点的data-tt-id 值 
3  表格中行的展示必须按照树的展开顺序来，即传递过来的List必须是有序的，且与树展开后的顺序一致

Please note that the plugin expects the rows in the HTML table to be in the same order in which they should be displayed in the tree. For example, suppose you have three nodes: A, B (child of node A) and C (child of node B). If you create rows for these nodes in your HTML table in the following order A - C - B, then the tree will not display correctly. You have to make sure that the rows are in the order A - B - C.

表格HTML代码示例：

<table>   <tr data-tt-id="1">     <td>Parent</td>   </tr>   <tr data-tt-id="2" data-tt-parent-id="1">     <td>Child</td>   </tr> </table>

Configuration

Settings

Events

Public API

Plugin Function

treetable()

treetable() 方法可以传入下面的参数：

options(optional) : 一个描述配置的JS对象。

force(optional)：参数为true时强制重新初始化树。

Additional Functions

对树操作的一些方法，附加方法必须通过treetable()方法调用。Eg：折叠id=42的节点， $("#tree").treetable("collapseNode", "42").

collapseAll()：折叠所有节点

collapseNode(id)：Collapse a single node, identified by id.

expandAll()：Expand all nodes at once.

expandNode(id)：Expand a single node, identified by id.

loadBranch(node, rows)：向树中插入新行(<tr>s), 传入参数 node 为父节点，rows为待插入的行. 如果父节点node为null ，新行被作为父节点插入

move(nodeId, destinationId)：Move node nodeId to new parent with destinationId.

node(id)：Select a node from the tree. Returns a TreeTable.Node object.

removeNode(id)：从树中移除某个节点及其所有子节点

reveal(id)：展示树中的某个节点

sortBranch(node)

sortBranch(node, columnOrFunction)：根据字母顺序对node 节点的所有子节点排序。Defaults to sorting on the values in the configured tree column (see settings). Pass an optional column number or sorting function as the second argument columnOrFunction. See the tests for examples of custom sorting functions. Does not recursively sort children of children.

unloadBranch(node)：Remove nodes/rows (HTML <tr>s) from the tree, with parent node. Note that the parent (node) will not be removed.

Classes

HTML tr class:

expanded：标识节点被展开

collapsed：标识节点被折叠

branch：分支节点，有子节点或者拥有 branchAttr 属性

leaf：叶子节点，无子节点

Examples

Basic Static Tree ：

$("#example-basic-static").treetable();

Basic Expandable Tree

$("#example-basic-expandable").treetable({ expandable: true });

Complex Tree With Drag and Drop

$("#example-advanced").treetable({ expandable: true });  // Highlight selected row $("#example-advanced tbody").on("mousedown", "tr", function() {   $(".selected").not(this).removeClass("selected");   $(this).toggleClass("selected"); });  // Drag & Drop Example Code $("#example-advanced .file, #example-advanced .folder").draggable({   helper: "clone",   opacity: .75,   refreshPositions: true,   revert: "invalid",   revertDuration: 300,   scroll: true });  $("#example-advanced .folder").each(function() {   $(this).parents("#example-advanced tr").droppable({     accept: ".file, .folder",     drop: function(e, ui) {       var droppedEl = ui.draggable.parents("tr");       $("#example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));     },     hoverClass: "accept",     over: function(e, ui) {       var droppedEl = ui.draggable.parents("tr");       if(this != droppedEl[0] && !$(this).is(".expanded")) {         $("#example-advanced").treetable("expandNode", $(this).data("ttId"));       }     }   }); });

异步加载：

$("#treetable").treetable({   expandable: true,// 展示  initialState :"expanded",//默认打开所有节点   stringCollapse:'关闭',  stringExpand:'展开',    onNodeExpand: function() {// 分支展开后的回调函数         var node = this;       //判断当前节点是否已经拥有子节点       var childSize = $("#treetable").find("[data-tt-parent-id='" + node.id + "']").length;       if (childSize > 0) {              return;        }       var data = "pageId=" + node.id;        // Render loader/spinner while loading 加载时渲染        $.ajax({            loading : false,            sync: false,// Must be false, otherwise loadBranch happens after showChildren?          url : context + "/document/loadChild.json",          data: data,             success:function(result) {              if(0 == result.code ){                        if(!com.isNull(result.body)){                       if(0 == eval(result.body['chilPages']).length){//不存在子节点                             var $tr = $("#treetable").find("[data-tt-id='" + node.id + "']");                           $tr.attr("data-tt-branch","false");// data-tt-branch 标记当前节点是否是分支节点，在树被初始化的时候生效                           $tr.find("span.indenter").html("");// 移除展开图标                            return;                         }                                               var rows = this.getnereateHtml(result.body['chilPages']);                        $("#treetable").treetable("loadBranch", node, rows);// 插入子节点                        $("#treetable").treetable("expandNode", node.id);// 展开子节点                   }               }else{                  alert(result.tip);              }               }       });       } }); 

Using treetable with PersistJS

https://github.com/jughead/jquery-treetable-ajax-persist/blob/master/example/index.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../src/javascripts/jquery.treetable-ajax-persist.js"></script> <script type="text/javascript" src="../src/javascripts/jquery.treetable-3.0.0.js"></script> <script type="text/javascript" src="../src/javascripts/persist-min.js"></script> <link href="../src/stylesheets/jquery.treetable.css" media="all" rel="stylesheet" type="text/css" /> $("#treetable").agikiTreeTable({// treetable & persistJs     persist: true, // 使用客户端缓存   /*  * 客户端缓存文件名称：采用正则表达式：/^[a-z][a-z0-9_ -]+$/i 进行过滤，  * 名称错误时直接throw new Error("Invalid name");     */  persistStoreName: "docFiles",     // 其他属性同treetable });