jQuery.treetable使用及非同步載入

標籤：document   狀態   使用   note   rip   ges   href   ret   app   

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>

ConfigurationSettings

 

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="#">&nbsp;</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 APIPlugin 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, // 使用用戶端緩衝 /* * 用戶端快取檔案名稱：採用Regex：/^[a-z][a-z0-9_ -]+$/i 進行過濾， * 名稱錯誤時直接throw new Error("Invalid name"); */ persistStoreName: "docFiles", // 其他屬性同treetable }); 

 

jQuery.treetable使用及非同步載入