bootstrap-table 常用总结-树形结构（展开和折叠）

　　今天在工作的时候，遇到了一个需求，就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉，然后去百度，结果也不是很准确。最后经过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	返回树的根节点	// expand all root nodes $('.tree').treegrid('getrootnodes').treegrid('expand');
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');