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
| 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,國際化使用。 |
Events
| Setting |
Type |
Default |
Description |
| onInitialized |
function |
null |
樹初始化完畢后的回調函數. |
| onNodeCollapse |
function |
null |
節點折疊時的回調函數. |
| onNodeExpand |
function |
null |
節點展開時的回調函數. |
| onNodeInitialized |
function |
null |
節點初始化完畢后的回調函數 |
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 });