bootstrap-table常⽤总结-树形结构（展开和折叠）
  今天在⼯作的时候，遇到了⼀个需求，就是需要⼀键展开或者关闭树形结构。关于树形结构的不是很熟悉，然后去百度，结果也不是很准确。最后经过Google才到。下⾯分享给⼤家
直接看代码：
1var flag = true;//开启还是关闭的标志位
2function change_tree(target){
3if(flag){
4//$id('getRootNodes').treegrid('expand');
5//$id('getParentNode').treegrid('expand');
6                $id('expandAll');
7                flag = !flag;
8            }else{
9//$id('getRootNodes').treegrid('collapse');
10//$id('getParentNode').treegrid('collapse');
11                $id('collapseAll');
12                flag = !flag;
13            }
14        }
上⾯的是折叠，下⾯的是展开。有⼀个标志位，每次执⾏不同的代码。然后把到的表格贴在下⾯，⽅便⼤家查阅（侵删）
常⽤的配置项，这个表格可以和我
参数类型默认值描述
treeColumn Numeric0树中表格中的哪⼀列
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 2bootstrap 5
};
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');
}
});
$('#tree-1').find('tr').each(function() {    if ($(this).treegrid("isNode")) {
isNode如果元素是节点则返回true    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 isExpanded节点是展开的吗
isCollapsed节点是折叠的吗isOneOfParentsCollapsed⾄少⼀个节点是折叠的吗
expand展开节点
collapse折叠节点
expandRecursive节点递归展开collapseRecursive节点递归折叠
expandAll展开所有节点
collapseAll折叠所有节点
toggle当处于展开状态的时候将节点折叠
当处于折叠状态的时候将节点展开render重绘节点及其⼦节点

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。