今天在工作的時候，遇到了一個需求，就是需要一鍵展開或者關閉樹形結構。關於樹形結構的不是很熟悉，然後去百度，結果也不是很準確。最後經過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'); |