jQuery TreeGrid

为避免重复造轮子，今天简单看了下将jQuery的TreeGrid，现在将其记录如下，希望能够对大家有所帮助。

插件下载地址：http://plugins.jquery.com/treegrid/

TreeGrid特点

在HTML页面中的table元素中创建TreeGrid

简单灵活的javascript实现

兼容bootstrap2和3

能够保存树的状态

TreeGrid用法

第一步：初始化插件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.treegrid.js"></script>
<link rel="stylesheet" href="css/jquery.treegrid.css">

<script type="text/javascript">
  $('.tree').treegrid();
</script>

第二步：创建表

<table class="tree">
	<tr class="treegrid-1">
		<td>Root node</td><td>Additional info</td>
	</tr>
	<tr class="treegrid-2 treegrid-parent-1">
		<td>Node 1-1</td><td>Additional info</td>
	</tr>
	<tr class="treegrid-3 treegrid-parent-1">
		<td>Node 1-2</td><td>Additional info</td>
	</tr>
	<tr class="treegrid-4 treegrid-parent-3">
		<td>Node 1-2-1</td><td>Additional info</td>
	</tr>
</table>

第三步：查看结果


其他例子

Basic example

Tree on 2nd column example

Save state example

TreeGrid for bootstrap 2.x

TreeGrid for bootstrap 3.x

配置设置

设置

参数类型默认值描述
treeColumnNumeric0树中表格中的哪一列
initialStateStringexpanded初始化时树的状态
'expanded' - 所有节点都展开
'collapsed' - 所有节点都折叠
saveStateBooleanfalse如果是true树的再次加载页面的时候树的状态将保存
saveStateMethodStringcookie'cookie' - 保存cookie的状态
'hash' - 保存hash的状态
saveStateNameStringtree-grid-state通过cookie或hash的名字来保存状态
expanderTemplateString<span class="treegrid-expander"></span>点击HTML元素时将折叠或展开分支
expanderExpandedClassStringtreegrid-expander-expanded当它展开的时候可以使用扩展元素
expanderCollapsedClassStringtreegrid-expander-collapsed当它折叠的时候可以使用扩展元素
indentTemplateString<span class="treegrid-indent"></span>HTML元素将根据深度嵌套节点做填充

Public方法

方法名称描述示例
getRootNodes返回树的根节点
// Expand all root nodes$('.tree').treegrid('getRootNodes').treegrid('expand');
getNodeId返回节点的id
if($('#node-2').treegrid('getNodeId')===2){
   // Do something with node 2
 };
getParentNodeId返回父节点的id或如果节点是根就返回nullif($('#node-2').treegrid('getParentNodeId')===2){
   // Do something if parent node Id is 2
 };
getAllNodes返回树的所有节点// Find all nodes
   $('#tree-1').treegrid('getAllNodes').each(function() {
     if ($(this).treegrid("isLast")) {
       //Do something with all last nodes
     }
   });
getParentNode返回父节点或如果节点是根就返回null// Expand parent node
 $('#node-2').treegrid('getParentNode').treegrid('collapse');
getChildNodes返回节点的子节点或如果节点是叶子节点则返回null// Expand child nodes
 $('#node-2').treegrid('getChildNodes').treegrid('expand');
getDepth返回树嵌套分支的深度// Expand all nodes 2nd nesting
 $('.tree').find('tr').each(function(){
   if ($(this).treegrid('getDepth')<2){
 $(this).treegrid('expand');
   }
 });
isNode如果元素是节点则返回true$('#tree-1').find('tr').each(function() {
     if ($(this).treegrid("isNode")) {
       //Do something
     }
   });
isLeaf该节点有叶子吗// hide all files
 $('.tree').find('tr').each(function(){
   if ($(this).treegrid('isLeaf')){
 $(this).hide();
   }
 });
isLast如果节点在最后，则返回true// hide all last elements
 $('.tree').find('tr').each(function(){
   if ($(this).treegrid('isLast')){
 $(this).hide();
   }
 });
isFirst如果节点在第一个，则返回true// hide all last elements
 $('.tree').find('tr').each(function(){
   if ($(this).treegrid('isFirst')){
 $(this).hide();
   }
 });
isExpanded节点是展开的吗if($('#node-2').treegrid('isExpanded')){
   // Do something if node expanded
 };
isCollapsed节点是折叠的吗if($('#node-2').treegrid('isCollapsed')){
   // Do something if node collapsed
 };
isOneOfParentsCollapsed至少一个节点是折叠的吗 if($('#node-2').treegrid('isOneOfParentCollapsed')){
   // Do something if one of parent collapsed
 };
expand展开节点$('#node-2').treegrid('expand');
collapse折叠节点$('#node-2').treegrid('collapse');
expandRecursive节点递归展开$('#node-2').treegrid('expandRecursive');
collapseRecursive节点递归折叠$('#node-2').treegrid('collapseRecursive');
expandAll展开所有节点$('#tree').treegrid('expandAll');
collapseAll折叠所有节点$('#tree').treegrid('collapseAll');
toggle当处于展开状态的时候将节点折叠
 当处于折叠状态的时候将节点展开		$('#node-2').treegrid('toggle');
render重绘节点及其子节点$('#node-2').treegrid('render');

单元测试
http://maxazan.github.io/jquery-treegrid/test.html
版权声明：本文为sunyingyuan原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。