今天在工作的时候，遇到了一个需求，就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉，然后去百度，结果也不是很准确。最后经过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'); |
如对本文有疑问， 点击进行留言回复！！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论