关于树形结构，上篇文章如果还是不能理解的话，请看这一篇。把其他的没有用到的功能都去掉，只留最基础的树形结构！

　　废话不多说，直接上代码！所有的数据都是走的本地，如果大家想改的话可以自己改，但是需要注意的是，pid也就查找的父元素的字段和父元素的id字段，数据格式需要保持一致，可以都是number类型，也可以都是string类型，两者需要统一

 <!DOCTYPE HTML>

 <html lang="zh-cn">

     <head>

         <meta charset="utf-8" />

         <meta http-equiv="X-UA-Compatible" content="IE=edge">

         <meta content="width=device-width,initial-scale=1.0" name="viewport">

         <meta content="yes" name="apple-mobile-web-app-capable">

         <meta content="black" name="apple-mobile-web-app-status-bar-style">

         <meta content="telephone=no" name="format-detection">

         <meta content="email=no" name="format-detection">

         <title>系统管理</title>

         <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

         <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

         <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">

     </head>

     <body>

         <div class="container">

             <h1>树形表格 ： Table Treegrid</h1>

             <table id="table"></table>

             <br/>

         </div>

     </body>

     <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

     <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

     <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>

     <script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

     <script type="text/javascript">

         var $table = $('#table');

         var data = [{

                 "time": "2019-08-27",

                 "id": 1,

                 "content": "内容1",

                 "pid": ""

             }, {

                 "time": "2019-08-27",

                 "id": 2,

                 "content": "内容2",

                 "pid": 1

             }, {

                 "time": "2019-08-27",

                 "id": 3,

                 "content": "内容3",

                 "pid": 1

             }, {

                 "time": "2019-08-27",

                 "id": 4,

                 "content": "内容4",

                 "pid": ""

             }, {

                 "time": "2019-08-27",

                 "id": 5,

                 "content": "内容5",

                 "pid": 2

             },

             {

                 "time": "2019-08-27",

                 "id": 6,

                 "content": "内容6",

                 "pid": ""

             },

             {

                 "time": "2019-08-27",

                 "id": 7,

                 "content": "内容7",

                 "pid": 6

             },

         ];

         $(function() {

             $table.bootstrapTable({

                 data: data,

                 idField: 'id',

                 dataType: 'jsonp',

                 columns: [{

                         field: 'time',

                         title: '时间',

                         width: 140

                     },

                     {

                         field: 'content',

                         title: '主要内容'

                     },

                 ],

                 //在哪一列展开树形

                 treeShowField: 'time',

                 //指定父id列

                 parentIdField: 'pid',

                 onResetView: function(data) {

                     //console.log('load');

                     $table.treegrid({

                         initialState: 'collapsed', // 所有节点都折叠

                         // initialState: 'expanded',// 所有节点都展开，默认展开

                         treeColumn: 0,

                         // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式

                         // expanderCollapsedClass: 'glyphicon glyphicon-plus',

                         onChange: function() {

                             $table.bootstrapTable('resetWidth');

                         }

                     });

                     //只展开树形的第一级节点

                     //$table.treegrid('getRootNodes').treegrid('expand');

                 },

             });

         });

     </script>

上面的东西，直接复制到编辑器就能打开查看了。

bootstrap-table 常用总结-树形结构的更多相关文章

  1. bootstrap-table 常用总结-树形结构（展开和折叠）

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

  2. Lua打印table树形结构

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

  3. Bootstrap table 实现树形表格，实现联动选中，联动取消

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

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

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

  5. salesforce 零基础学习（七十）使用jquery table实现树形结构模式

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

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

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

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第十节--AdminLTE模板菜单处理

    上节我们把布局页,也有的临时的菜单,但是菜单不是应该动态加载的么?,所以我们这节来写菜单.首先我们看一下AdminLTE源码里面的菜单以及结构. <aside class="main- ...

  8. Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构

    Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型  按查找 ...

  9. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

随机推荐

  1. 使用Python编写打字训练小程序【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/devcloud/article/detail ...

  2. 了解 MongoDB 看这一篇就够了【华为云分享】

    目录 一.简介 二.基本模型 BSON 数据类型 分布式ID 三.操作语法 四.索引 索引特性 索引分类 索引评估.调优 五.集群 分片机制 副本集 六.事务与一致性 一致性 小结 一.简介 Mong ...

  3. JavaScript基础3

    While循环 在指定条件为真时循环执行代码块.先确定条件再执行代码 语法 while(条件) { 需要执行的代码 } 条件中所用变量如果没有值,循环就不会停下,会导致浏览器崩溃: do...whil ...

  4. zuul+security跨域Cors问题解决

    zuul+security跨域Cors问题解决 简介 场景 在服务后台都会出现跨域cors问题,不过一般spring解决起来比较方便,在框架+框架的基础上,问题就显得特别明显了,各种冲突,不了解源码的 ...

  5. Python实现截图功能你肯定不会吧？【面试必学】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:CyborgLin python实现截图功能. windows环境下.需 ...

  6. 贝壳2020——Java校招笔试题

    算法题4道: 题目描述: 给出n个正整数,要求找出相邻两个数字中差的绝对值最小的一对数字,如果有差的绝对值相同的,则输出最前面的一对数.(2<n<=100,正整数都在10^16范围内) 输 ...

  7. js（对象，入口函数，函数）

    对象: 创建: var myObject = {};/* 声明对象字面变量*/ 添加值: myObject.name="Jener"; myObject.age=25; 代码格式: ...

  8. MySQL 数据查询小练习

    作业 # 创建班级表 create table class ( cls_id int auto_increment primary key, cls_name varchar(10) not null ...

  9. NodeJS4-2静态资源服务器实战_实现获取文件路径

    实例2 : 实现获取文件路径,判断是文件还是文件夹,如果是文件夹就显示里面的列表文件,如果是文件就显示里面的内容 defaultConfig.js module.exports={ root:proc ...

  10. 《Java知识应用》Linux系统下word转PDF

    仅供学习,如需商用请联系开发商:https://apireference.aspose.com/java/words Jar包下载路径: 链接: https://pan.baidu.com/s/1s7 ...