2018年04月6日网站服务器迁移完成……

jQuery TreeGrid

javascript 苏 demo 3091℃ 0评论

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

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

TreeGrid特点

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

简单灵活的javascript实现

兼容bootstrap2和3

能够保存树的状态

TreeGrid用法

第一步:初始化插件

01.[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
02. 
03.<script type="text/javascript" src="js/jquery.js"></script> 
04.<script type="text/javascript" src="js/jquery.treegrid.js"></script> 
05.<link rel="stylesheet" href="css/jquery.treegrid.css"
06. 
07.<script type="text/javascript"
08.$('.tree').treegrid(); 
09.</script>

 

 

第二步:创建表

 

 

01.[html] view plaincopy在CODE上查看代码片派生到我的代码片
02. 
03.<table class="tree"
04.<tr class="treegrid-1"
05.<td>Root node</td><td>Additional info</td
06.</tr
07.<tr class="treegrid-2 treegrid-parent-1"
08.<td>Node 1-1</td><td>Additional info</td
09.</tr
10.<tr class="treegrid-3 treegrid-parent-1"
11.<td>Node 1-2</td><td>Additional info</td
12.</tr
13.<tr class="treegrid-4 treegrid-parent-3"
14.<td>Node 1-2-1</td><td>Additional info</td
15.</tr
16.</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 返回树的根节点
1.[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
2. 
3. 
4.// Expand all root nodes$('.tree').treegrid('getRootNodes').treegrid('expand');
getNodeId 返回节点的id
1.[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
2. 
3. 
4.if($('#node-2').treegrid('getNodeId')===2){
5.// Do something with node 2
6.};
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

 

 

打赏

转载请注明:苏demo的别样人生 » jQuery TreeGrid

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情