jQuery TreeGrid

为避免重复造轮子，今天简单看了下将jQuery的TreeGrid，现在将其记录如下，希望能够对大家有所帮助。插件下载地址：http: plugins jquery com treegrid TreeGrid特点在HTML页面中的table元素中创建TreeGrid简单

TreeGrid特点

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

简单灵活的javascript实现

兼容bootstrap2和3

能够保存树的状态

TreeGrid用法

第一步：初始化插件

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

$('.tree').treegrid();

</script>

第二步：创建表

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

<td>Root node</td><td>Additional info</td>

</tr>

<td>Node 1-1</td><td>Additional info</td>

</tr>

<td>Node 1-2</td><td>Additional info</td>

</tr>

<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://www.sm136.com

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。