bootstrap-table 常用总结-树形结构(展开和折叠)
今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉,然后去百度,结果也不是很准确。最后经过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 | 返回树的根节点 |
|
getNodeId | 返回节点的id |
if($('#node-2').treegrid('getNodeId')===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-table 常用总结-树形结构
关于树形结构,上篇文章如果还是不能理解的话,请看这一篇.把其他的没有用到的功能都去掉,只留最基础的树形结构! 废话不多说,直接上代码!所有的数据都是走的本地,如果大家想改的话可以自己改,但是需要注意的 ...
- Bootstrap table 实现树形表格,实现联动选中,联动取消
公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...
- bootstrap table dataView展开行详情,p元素自动换行
// bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }
- Lua打印table树形结构
--这是quick中的工具,作用就是打印Lua中强大的table的结构, 当table的嵌套层级比较多的时候,这个工具非常方便,开发中必备的工具.--具体使用方法:local debug = requ ...
- Delphi TreeView – 自动展开树形结构
Delphi TreeView – 自动展开树形结构 当处理完TreeView控件树形结构的数据后,需要默认自动全部展开,可以用到TreeView的Expanded属性. 1 2 3 4 5 6 7 ...
- ThinkPHP第二十天(getField用法、常用管理员表结构、树形结构前小图标CSS)
1.getField($fields,$sepa=null) A:当$fields为1个字段,$sepa=null的时候,返回一个符合条件的记录的字段. B:如果要取得所有符合条件记录字段,需要$se ...
- salesforce 零基础学习(七十)使用jquery table实现树形结构模式
项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI
一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
随机推荐
- 走近深度学习,认识MoXing:初识华为云ModelArts的王牌利器 — MoXing
[摘要] 本文为MoXing系列文章第一篇,主要介绍什么是MoXing,MoXing API的优势以及MoXing程序的基本结构. MoXing的概念 MoXing是华为云深度学习服务提供的网络模型开 ...
- .Net Core的API网关Ocelot的使用(二)[负载,限流,熔断,Header转换]
网关的负载均衡 当下游拥有多个节点的时候,我们可以用DownstreamHostAndPorts来配置 { "UpstreamPathTemplate": "/Api_A ...
- .Net Core的API网关Ocelot使用 (一)
1.什么是API网关 API网关是微服务架构中的唯一入口,它提供一个单独且统一的API入口用于访问内部一个或多个API.它可以具有身份验证,监控,负载均衡,缓存,请求分片与管理,静态响应处理等.API ...
- Mysql基础01-语法
数据库 数据的存储:将数据放到表中,表再放到库中. 一个数据库中可以有多个表,每个表都有一个名字,用来标识自己.表名具有唯一性. 表由列组成,我们也称为字段.每个字段描述了它所含有的数据的意义表由列组 ...
- 这3步简单搭建Python http服务器 你肯定不会吧?
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:stark张宇 趁着周末的闲暇时光看看Python是什么鬼 给疲倦的 ...
- redis第一讲【redis的描述,linux和docker下的安装使用】
Redis(REmote DIctionary Server):是什么 redis(远程字典服务器),是完全开源免费的,高性能的k/v分布式内存数据,热门的Nosql数据库 Redis可以干什么: 内 ...
- JS-选择排序
选择排序 选择排序的原理如下.遍历数组,设置最小值的索引为 0,如果取出的值比当前最小值小,就替换最小值索引,遍历完成后,将第一个元素和最小值索引上的值交换.如上操作后,第一个元素就是数组中的最小值, ...
- Linux之find命令操作技巧
一.前言 工作中,我们常用find命令查找某些文件或者删除一些旧的日志文件,所以学会find命令的操作技巧就极为重要. 二.find常用参数选项 -depth 从指定目录下最深层的子目录开始查找 -m ...
- js重学
js重学 数据类型 基本数据类型: Undefined.Null.Number.Boolean.String 复杂数据类型:Object Object:由一组无序键值对组成 typeof 未定义--u ...
- 清晰架构(Clean Architecture)的Go微服务: 程序结构
我使用Go和gRPC创建了一个微服务,并试图找出最佳的程序结构,它可以用作我未来程序的模板. 我有Java背景,并发现自己在Java和Go之间挣扎,它们之间的编程理念完全不同.我写了一系列关于在项目工 ...