bootstrap-table 常用总结-树形结构(展开和折叠)_莺呼_前端开发者

  今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉,然后去百度,结果也不是很准确。最后经过Google才找到。下面分享给大家

 今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉,然后去百度,结果也不是很准确。最后经过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         }
 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         }

1vartrue//开启还是关闭的标志位 2function change_tree(target){
3if(flag){
4//$table.treegrid(‘getRootNodes’).treegrid(‘expand’); 5//$table.treegrid(‘getParentNode’).treegrid(‘expand’); 6);
7flag;
8else{
9//$table.treegrid(‘getRootNodes’).treegrid(‘collapse’);10//$table.treegrid(‘getParentNode’).treegrid(‘collapse’);11);
12flag;
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元素将根据深度嵌套节点做填充
参数 类型 默认值 描述
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元素将根据深度嵌套节点做填充
参数 类型 默认值 描述 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元素将根据深度嵌套节点做填充 参数 类型 默认值 描述 参数

参数

类型

类型

默认值

默认值

描述

描述

treeColumn Numeric 0 树中表格中的哪一列 treeColumn

treeColumn

Numeric

Numeric

0

0

树中表格中的哪一列

树中表格中的哪一列

initialState String expanded 初始化时树的状态

‘expanded’ – 所有节点都展开


‘collapsed’ – 所有节点都折叠
initialState

initialState

String

String

expanded

expanded

初始化时树的状态

‘expanded’ – 所有节点都展开


‘collapsed’ – 所有节点都折叠

初始化时树的状态

‘expanded’ – 所有节点都展开


‘collapsed’ – 所有节点都折叠

saveState Boolean false 如果是true树的再次加载页面的时候树的状态将保存 saveState

saveState

Boolean

Boolean

false

false

如果是true树的再次加载页面的时候树的状态将保存

如果是true树的再次加载页面的时候树的状态将保存

saveStateMethod String cookie ‘cookie’ – 保存cookie的状态

‘hash’ – 保存hash的状态
saveStateMethod

saveStateMethod

String

String

cookie

cookie

‘cookie’ – 保存cookie的状态

‘hash’ – 保存hash的状态

‘cookie’ – 保存cookie的状态

‘hash’ – 保存hash的状态

saveStateName String tree-grid-state 通过cookie或hash的名字来保存状态 saveStateName

saveStateName

String

String

tree-grid-state

tree-grid-state

通过cookie或hash的名字来保存状态

通过cookie或hash的名字来保存状态

expanderTemplate String <span class=”treegrid-expander”></span> 点击HTML元素时将折叠或展开分支 expanderTemplate

expanderTemplate

String

String

<span class=”treegrid-expander”></span>

<span class=”treegrid-expander”></span>

点击HTML元素时将折叠或展开分支

点击HTML元素时将折叠或展开分支

expanderExpandedClass String treegrid-expander-expanded 当它展开的时候可以使用扩展元素 expanderExpandedClass

expanderExpandedClass

String

String

treegrid-expander-expanded

treegrid-expander-expanded

当它展开的时候可以使用扩展元素

当它展开的时候可以使用扩展元素

expanderCollapsedClass String treegrid-expander-collapsed 当它折叠的时候可以使用扩展元素 expanderCollapsedClass

expanderCollapsedClass

String

String

treegrid-expander-collapsed

treegrid-expander-collapsed

当它折叠的时候可以使用扩展元素

当它折叠的时候可以使用扩展元素

indentTemplate String <span class=”treegrid-indent”></span> HTML元素将根据深度嵌套节点做填充 indentTemplate

indentTemplate

String

String

<span class=”treegrid-indent”></span>

<span class=”treegrid-indent”></span>

HTML元素将根据深度嵌套节点做填充

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

方法名称

描述

描述

示例

示例

getRootNodes 返回树的根节点


// Expand all root nodes

$('.tree').treegrid('getRootNodes').treegrid('expand');

getRootNodes

getRootNodes

返回树的根节点

返回树的根节点


// Expand all root nodes

$('.tree').treegrid('getRootNodes').treegrid('expand');


// Expand all root nodes


// Expand all root nodes
// Expand all root nodes

$('.tree').treegrid('getRootNodes').treegrid('expand');

$('.tree').treegrid('getRootNodes').treegrid('expand');$('.tree').treegrid('getRootNodes').treegrid('expand');

getNodeId 返回节点的id

if($(‘#node-2’).treegrid(‘getNodeId’)===2){

  // Do something with node 2


};
getNodeId

getNodeId

返回节点的id

返回节点的id


if($(‘#node-2’).treegrid(‘getNodeId’)===2){

  // Do something with node 2


};


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


};
getParentNodeId

getParentNodeId

返回父节点的id或如果节点是根就返回null

返回父节点的id或如果节点是根就返回null

if($(‘#node-2’).treegrid(‘getParentNodeId’)===2){

  // Do something if parent node Id is 2


};

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


    }


  });
getAllNodes

getAllNodes

返回树的所有节点

返回树的所有节点

// Find all nodes

  $(‘#tree-1’).treegrid(‘getAllNodes’).each(function() {


    if ($(this).treegrid(“isLast”)) {


      //Do something with all last nodes


    }


  });

// 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’);
getParentNode

getParentNode

返回父节点或如果节点是根就返回null

返回父节点或如果节点是根就返回null

// Expand parent node

$(‘#node-2’).treegrid(‘getParentNode’).treegrid(‘collapse’);

// Expand parent node

$(‘#node-2’).treegrid(‘getParentNode’).treegrid(‘collapse’);

getChildNodes 返回节点的子节点或如果节点是叶子节点则返回null // Expand child nodes

$(‘#node-2’).treegrid(‘getChildNodes’).treegrid(‘expand’);
getChildNodes

getChildNodes

返回节点的子节点或如果节点是叶子节点则返回null

返回节点的子节点或如果节点是叶子节点则返回null

// Expand child nodes

$(‘#node-2’).treegrid(‘getChildNodes’).treegrid(‘expand’);

// 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’);

  }


});
getDepth

getDepth

返回树嵌套分支的深度

返回树嵌套分支的深度

// Expand all nodes 2nd nesting

$(‘.tree’).find(‘tr’).each(function(){


  if ($(this).treegrid(‘getDepth’)<2){

$(this).treegrid(‘expand’);

  }


});

// 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


    }


  });
isNode

isNode

如果元素是节点则返回true

如果元素是节点则返回true

$(‘#tree-1’).find(‘tr’).each(function() {

    if ($(this).treegrid(“isNode”)) {


      //Do something


    }


  });

$(‘#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();

  }


});
isLeaf

isLeaf

该节点有叶子吗

该节点有叶子吗

// hide all files

$(‘.tree’).find(‘tr’).each(function(){


  if ($(this).treegrid(‘isLeaf’)){

$(this).hide();

  }


});

// 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();

  }


});
isLast

isLast

如果节点在最后,则返回true

如果节点在最后,则返回true

// hide all last elements

$(‘.tree’).find(‘tr’).each(function(){


  if ($(this).treegrid(‘isLast’)){

$(this).hide();

  }


});

// 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();

  }


});
isFirst

isFirst

如果节点在第一个,则返回true

如果节点在第一个,则返回true

// hide all last elements

$(‘.tree’).find(‘tr’).each(function(){


  if ($(this).treegrid(‘isFirst’)){

$(this).hide();

  }


});

// 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


};
isExpanded

isExpanded

节点是展开的吗

节点是展开的吗

if($(‘#node-2’).treegrid(‘isExpanded’)){

  // Do something if node expanded


};

if($(‘#node-2’).treegrid(‘isExpanded’)){

  // Do something if node expanded


};

isCollapsed 节点是折叠的吗 if($(‘#node-2’).treegrid(‘isCollapsed’)){

  // Do something if node collapsed


};
isCollapsed

isCollapsed

节点是折叠的吗

节点是折叠的吗

if($(‘#node-2’).treegrid(‘isCollapsed’)){

  // Do something if node collapsed


};

if($(‘#node-2’).treegrid(‘isCollapsed’)){

  // Do something if node collapsed


};

isOneOfParentsCollapsed 至少一个节点是折叠的吗  if($(‘#node-2’).treegrid(‘isOneOfParentCollapsed’)){

  // Do something if one of parent collapsed


};
isOneOfParentsCollapsed

isOneOfParentsCollapsed

至少一个节点是折叠的吗 

至少一个节点是折叠的吗 

if($(‘#node-2’).treegrid(‘isOneOfParentCollapsed’)){

  // Do something if one of parent collapsed


};

if($(‘#node-2’).treegrid(‘isOneOfParentCollapsed’)){

  // Do something if one of parent collapsed


};

expand 展开节点 $(‘#node-2’).treegrid(‘expand’); expand

expand

展开节点

展开节点

$(‘#node-2’).treegrid(‘expand’);

$(‘#node-2’).treegrid(‘expand’);

collapse 折叠节点 $(‘#node-2’).treegrid(‘collapse’); collapse

collapse

折叠节点

折叠节点

$(‘#node-2’).treegrid(‘collapse’);

$(‘#node-2’).treegrid(‘collapse’);

expandRecursive 节点递归展开 $(‘#node-2’).treegrid(‘expandRecursive’); expandRecursive

expandRecursive

节点递归展开

节点递归展开

$(‘#node-2’).treegrid(‘expandRecursive’);

$(‘#node-2’).treegrid(‘expandRecursive’);

collapseRecursive 节点递归折叠 $(‘#node-2’).treegrid(‘collapseRecursive’); collapseRecursive

collapseRecursive

节点递归折叠

节点递归折叠

$(‘#node-2’).treegrid(‘collapseRecursive’);

$(‘#node-2’).treegrid(‘collapseRecursive’);

expandAll 展开所有节点 $(‘#tree’).treegrid(‘expandAll’); expandAll

expandAll

展开所有节点

展开所有节点

$(‘#tree’).treegrid(‘expandAll’);

$(‘#tree’).treegrid(‘expandAll’);

collapseAll 折叠所有节点 $(‘#tree’).treegrid(‘collapseAll’); collapseAll

collapseAll

折叠所有节点

折叠所有节点

$(‘#tree’).treegrid(‘collapseAll’);

$(‘#tree’).treegrid(‘collapseAll’);

toggle 当处于展开状态的时候将节点折叠

当处于折叠状态的时候将节点展开
$(‘#node-2’).treegrid(‘toggle’); toggle

toggle

当处于展开状态的时候将节点折叠

当处于折叠状态的时候将节点展开

当处于展开状态的时候将节点折叠

当处于折叠状态的时候将节点展开

$(‘#node-2’).treegrid(‘toggle’);

$(‘#node-2’).treegrid(‘toggle’);

render 重绘节点及其子节点 $(‘#node-2’).treegrid(‘render’); render

render

重绘节点及其子节点

重绘节点及其子节点

$(‘#node-2’).treegrid(‘render’);

$(‘#node-2’).treegrid(‘render’);

» 本文来自:前端开发者 » 《bootstrap-table 常用总结-树形结构(展开和折叠)_莺呼_前端开发者》
» 本文链接地址:https://www.rokub.com/73697.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!