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 是利用 ...
随机推荐
- KETTLE单表同步,写入EXCEL和TXT
以下操作都在5.0.1版本下进行开发,其余版本可以进行自动比对 在平时工作当中,会遇到这种情况,而且很常见.比如:1.自动生成文件TXT或者EXCEL(电信行业该需求居多),上传至某服务器:2.双方数 ...
- GeoTools介绍、环境安装、读取shp文件并显示
GeoTools是一个开放源代码(LGPL)Java代码库,它提供了符合标准的方法来处理地理空间数据,例如实现地理信息系统(GIS).GeoTools库实现了开放地理空间联盟(OGC)规范. Geot ...
- Pandas里面常用的一些数据分析函数总结
import pandas as pdimport numpy as np pandas 有两个主要的数据结构:Series 和 DataFrame:Series 是一个一维数组对象 ,它包含一组索引 ...
- 2017 CCPC秦皇岛 L题 One Dimensions Dave
BaoBao is trapped in a one-dimensional maze consisting of grids arranged in a row! The grids are nu ...
- 【Go入门学习】理解区分数组和切片
一.前言 学过 Go 的都知道在 Go 语言中有四种复合数据类型:数组.切片(Slice).哈希表(Map)和结构体(Struct),而很多 Go 初学者也很容易把数组和切片弄混淆,所以要怎么把这两个 ...
- 《Dotnet9》系列-开源C# Winform控件库1《HZHControls》强力推荐
大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.我最近在写dotnet分享文章,希望能让更多人看到dotnet的发展,了解更多dotnet技术,帮助dotnet程序员应用dot ...
- 【CSS】352- 有趣的CSS弹跳动画
点击上方"前端自习课"关注,学习起来~ 这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴 ...
- 聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer
事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一 ...
- 学习Python第一天 ---Hello World
引言 人生苦短,请用 Python(3.+) 越来越多的情况下使用Python语言进行"代码粘合"和"数据分析"变得非常方便,而且Python 在"爬 ...
- 建议3:正确处理Javascript特殊值---(1)正确使用NaN和Infinity
NaN时IEEE 754中定义的一个特殊的数量值.他不表示一个数字,尽管下面的表达式返回的是true typeof(NaN) === 'number' //true 该值可能会在试图将非数字形式的字符 ...