jQuery TreeGrid

JQuery

1个成员

jQuery TreeGrid

发表于 2017-02-04 • 3677 次查看

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

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

TreeGrid特点

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

简单灵活的javascript实现

兼容bootstrap2和3

能够保存树的状态

TreeGrid用法

第一步：初始化插件

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

<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>

第二步：创建表

[html] view plaincopy在CODE上查看代码片派生到我的代码片

<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

配置设置

设置

参数	类型	默认值	描述
treeColumn	Numeric	0	树中表格中的哪一列
initialState	String	expanded	初始化时树的状态 'expanded' - 所有节点都展开 'collapsed' - 所有节点都折叠
saveState	Boolean	false	如果是true树的再次加载页面的时候树的状态将保存
saveStateMethod	String	cookie	'cookie' - 保存cookie的状态 'hash' - 保存hash的状态
saveStateName	String	tree-grid-state	通过cookie或hash的名字来保存状态
expanderTemplate	String	<span class="treegrid-expander"></span>	点击HTML元素时将折叠或展开分支
expanderExpandedClass	String	treegrid-expander-expanded	当它展开的时候可以使用扩展元素
expanderCollapsedClass	String	treegrid-expander-collapsed	当它折叠的时候可以使用扩展元素
indentTemplate	String	<span class="treegrid-indent"></span>	HTML元素将根据深度嵌套节点做填充

Public方法

方法名称	描述	示例
getRootNodes	返回树的根节点	[javascript] view plaincopy在CODE上查看代码片派生到我的代码片 // Expand all root nodes$('.tree').treegrid('getRootNodes').treegrid('expand');
getNodeId	返回节点的id	[javascript] view plaincopy在CODE上查看代码片派生到我的代码片 if($('#node-2').treegrid('getNodeId')===2){ // Do something with node 2 };
getParentNodeId	返回父节点的id或如果节点是根就返回null	if($('#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');