jQuery TreeGrid

来源:转载

为避免重复造轮子,今天简单看了下将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');


 

单元测试

http://maxazan.github.io/jquery-treegrid/test.html




分享给朋友:
您可能感兴趣的文章:
随机阅读: