jQuery.treetable使用及异步加载

Posted 2020-10-04 疯子加天才

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="#">&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 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 });