bootstrap-table树形结构(展开和折叠)

更新日期: 2019-07-16阅读: 4.7k标签: bootstrap

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

上面的是折叠,下面的是展开。有一个标志位,每次执行不同的代码。


常用的配置项:

参数类型默认值描述
treeColumnNumeric0树中表格中的哪一列
initialStateStringexpanded初始化时树的状态
'expanded' - 所有节点都展开
'collapsed' - 所有节点都折叠
saveStateBooleanfalse如果是true树的再次加载页面的时候树的状态将保存
saveStateMethodStringcookie'cookie' - 保存cookie的状态
'hash' - 保存hash的状态
saveStateNameStringtree-grid-state通过cookie或hash的名字来保存状态
expanderTemplateString<span></span>点击html元素时将折叠或展开分支
expanderExpandedClassStringtreegrid-expander-expanded当它展开的时候可以使用扩展元素
expanderCollapsedClassStringtreegrid-expander-collapsed当它折叠的时候可以使用扩展元素
indentTemplateString<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或如果节点是根就返回nullif($('#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');

链接: https://fly63.com/article/detial/5952

bootstrap的响应式开发,如何使用bootstrap制作响应式布局网站

bootsrap响应式开发是为了让用户在不同尺寸的设备上,同一URL下浏览网页都可以获得良好的视觉效果。为了实现bootsrap响应式设计,我们需要创建适配各种设备尺寸的css,让页面加载的时候去匹配对应的css样式。

网站前端有必要学习bootstrap么?前端从bootstrap中可以学到什么

bootstrap出现的本意是让web开发更迅速、简单。那么作为前端开发的我们有必要学习bootstrap吗?作为前端开发的我们可以从bootstrap中可以学到什么?

bootstrap组件有哪些?bootstrap常用组件推荐

这篇文章主要整理bootstrap中常用的组件,比如:表格、表单验证、文件上传、复选下拉框、弹出框、时间组件、加载效果等

Bootstrap后台管理模板推荐_最值得拥有的免费Bootstrap后台管理模板

在网站开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台:AdminLTE、Gentelella Admin、Vali Admin、ModularAdmin、Metis、Ace

和 jQuery 说再见,Bootstrap 5 将移除对其依赖

Bootstrap 最新版本 4.3.1 已发布,作为 Bootstrap 4.3 发布的一部分,团队也公布了下一个主要版本 Bootstrap 5 的开发计划。将会在开发 Bootstrap 5 的过程中实现一些关键变化

响应式网站设计---Bootstrap

响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性。

bootstrap-select使用过程中的一些问题

这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子。点击没有反应,下拉框不出现

vue-cli项目引入jquery和bootstrap

webpack.ProvidePlugin插件里面可以配置全局引用,比如此处配置了jquery的使用,后面再vue里使用$,jQuery,windows.JQuery都等同于使用jquery,不需要再require或import

Vue 组件:给Bootstrap Modal增加缩放功能

Bootstrap 应该还是目前最流行的前端基础框架之一。因为架构方面的优势,它的侵入性很低,可以以各种方式集成到其它项目当中。在我厂的各种产品里,都有它的用武之地。前两天,老板抱怨,说 Modal(弹窗)在他的屏幕上太小

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!