bootstrap-table树形结构（睁开和折叠）

今天在事情的时刻，遇到了一个需求，就是需要一键睁开或者关闭树形结构。关于树形结构的不是很熟悉，然后去百度，效果也不是很准确。最后经由Google才找到。下面分享给人人

直接看代码：

var flag = true; //开启照样关闭的标志位
function change_tree(target) {
	if(flag) {
		//$table.treegrid('getRootNodes').treegrid('expand');
		//$table.treegrid('getParentNode').treegrid('expand');
		$table.treegrid('expandAll');
		flag = !flag;
	} else {
		//$table.treegrid('getRootNodes').treegrid('collapse');
		//$table.treegrid('getParentNode').treegrid('collapse');
		$table.treegrid('collapseAll');
		flag = !flag;
	}
}

上面的是折叠，下面的是睁开。有一个标志位，每次执行差别的代码。

常用的设置项:

参数	类型	默认值	形貌
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></span>	点击HTML米素时将折叠或睁开分支
expanderExpandedClass	String	treegrid-expander-expanded	当它睁开的时刻可以使用扩展米素
expanderCollapsedClass	String	treegrid-expander-collapsed	当它折叠的时刻可以使用扩展米素
indentTemplate	String	<span></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');

思源资源网：分类流动

1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5952

发表于 2021-04-05 14:55
阅读 ( 346 )
分类：互联网

bootstrap-table树形结构（睁开和折叠）

0 条评论

你可能感兴趣的文章

相关问题