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

  1. bootstrap-table 常用总结-树形结构

    关于树形结构,上篇文章如果还是不能理解的话,请看这一篇.把其他的没有用到的功能都去掉,只留最基础的树形结构! 废话不多说,直接上代码!所有的数据都是走的本地,如果大家想改的话可以自己改,但是需要注意的 ...

  2. Bootstrap table 实现树形表格,实现联动选中,联动取消

    公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...

  3. bootstrap table dataView展开行详情,p元素自动换行

    // bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }

  4. Lua打印table树形结构

    --这是quick中的工具,作用就是打印Lua中强大的table的结构, 当table的嵌套层级比较多的时候,这个工具非常方便,开发中必备的工具.--具体使用方法:local debug = requ ...

  5. Delphi TreeView – 自动展开树形结构

    Delphi TreeView – 自动展开树形结构 当处理完TreeView控件树形结构的数据后,需要默认自动全部展开,可以用到TreeView的Expanded属性. 1 2 3 4 5 6 7 ...

  6. ThinkPHP第二十天(getField用法、常用管理员表结构、树形结构前小图标CSS)

    1.getField($fields,$sepa=null) A:当$fields为1个字段,$sepa=null的时候,返回一个符合条件的记录的字段. B:如果要取得所有符合条件记录字段,需要$se ...

  7. salesforce 零基础学习(七十)使用jquery table实现树形结构模式

    项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...

  8. ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI

    一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...

  9. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

随机推荐

  1. luogu P1412 经营与开发 |dp

    题目描述 4X概念体系,是指在PC战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以"EX"为开头的英语单词. eXplore(探索) eXpand(拓张与发展) eXplo ...

  2. 详解TCP连接的“三次握手”与“四次挥手”(下)

    上文链接: 详解TCP连接的"三次握手"与"四次挥手"(上) 四.TCP的四次挥手(Four-Way Wavehand) 0.前言 对于"三次握手&q ...

  3. 最简单易懂的linux系统基础优化

    第10章 linux的系统优化 10.1 系统的版本,内核查看 10.1.1 系统版本的查看 [root@oldboy6666 ~]# cat /etc/redhat-release CentOS L ...

  4. 常见的linux快捷方式和英文错误提示

    第5章 linux常见的快捷方式 Ctrl +l 清屏的意思 2 Ctrl +c 退出当前的进程 3 Ctrl +w 删除光标到空格之间的信息 4 Ctrl +a 快速移动到光标行首 5 Ctrl + ...

  5. 基于centos7.3 redhat7.3安装LAMP(php7.0 php7.1)生产环境实践

  6. Openfiler存储搭建

    说明: Openfiler是一个基于Linux的开源免费网络存储管理操作系统,通过WEB界面对存储磁盘进行管理,支持iSCSI.NFS 等网络存储协议. 目前最新版本:openfileresa-2.9 ...

  7. 【重温基础】11.Map和Set对象

    本文是 重温基础 系列文章的第十一篇. 今日感受:注意身体,生病花钱又难受. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1.语法和数据类型 [重温基础]2 ...

  8. git下载问题

    官网下载:打不开,可用git for Windows 下载 地址:https://github.com/git-for-windows/git/releases

  9. 双重检查锁单例模式为什么要用volatile关键字?

    前言 从Java内存模型出发,结合并发编程中的原子性.可见性.有序性三个角度分析volatile所起的作用,并从汇编角度大致说了volatile的原理,说明了该关键字的应用场景:在这补充一点,分析下v ...

  10. Mysql添加path变量

    前提: 系统环境:Linux,服务器:阿里云轻量应用服务器 背景: 阿里云轻量应用服务器自带 mysql5.7,但是没有配置环境变量,因此直接输入 mysql -u root -p 将提示 comma ...