为避免重复造轮子，今天简单看了下将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> 第三步：查看结果
其他例子
配置设置
设置
| 参数 | 类型 | 默认值 | 描述 |
| 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 26.}; |
| 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
