今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉,然后去百度,结果也不是很准确。最后经过Google才找到。下面分享给大家
直接看代码:
1 var flag = true;//开启还是关闭的标志位 2 function change_tree(target){ 3 if(flag){ 4 //$table.treegrid('getRootNodes').treegrid('expand'); 5 //$table.treegrid('getParentNode').treegrid('expand'); 6 $table.treegrid('expandAll'); 7 flag = !flag; 8 }else{ 9 //$table.treegrid('getRootNodes').treegrid('collapse'); 10 //$table.treegrid('getParentNode').treegrid('collapse'); 11 $table.treegrid('collapseAll'); 12 flag = !flag; 13 } 14 }
上面的是折叠,下面的是展开。有一个标志位,每次执行不同的代码。然后把找到的表格贴在下面,方便大家查阅(侵删)
常用的配置项,这个表格可以和我上一篇的一起看
参数 | 类型 | 默认值 | 描述 |
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元素将根据深度嵌套节点做填充 |
然后下面是重头戏了,就是我们常用到的一些方法,都是有分封装的。大家可以自行取用
方法名称 | 描述 | 示例 |
getRootNodes | 返回树的根节点 |
|
getNodeId | 返回节点的id | 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'); |