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         }

上面的是折叠，下面的是展开。有一个标志位，每次执行不同的代码。然后把找到的表格贴在下面，方便大家查阅（侵删）

常用的配置项，这个表格可以和我@L_502_0@

@H_403_101@ 参数类型默认值描述 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元素将根据深度嵌套节点做填充

然后下面是重头戏了,就是我们常用到的一些方法，都是有分封装的。大家可以自行取用

@H_403_101@ 方法名称描述示例 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‘);

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

猜你在找的Bootstrap相关文章