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

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

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

  1 <!DOCTYPE HTML>
  2 <html lang="zh-cn">
  3 
  4     <head>
  5         <meta charset="utf-8" />
  6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7         <meta content="width=device-width,initial-scale=1.0" name="viewport">
  8         <meta content="yes" name="apple-mobile-web-app-capable">
  9         <meta content="black" name="apple-mobile-web-app-status-bar-style">
 10         <meta content="telephone=no" name="format-detection">
 11         <meta content="email=no" name="format-detection">
 12         <title>系统管理</title>
 13         <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 14         <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
 15         <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
 16     </head>
 17 
 18     <body>
 19         <div class="container">
 20             <h1>树形表格 : Table Treegrid</h1>
 21             <table id="table"></table>
 22             <br/>
 23         </div>
 24     </body>
 25     <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 26     <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
 27     <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
 28     <script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
 29     <script type="text/javascript">
 30         var $table = $('#table');
 31         var data = [{
 32                 "time": "2019-08-27",
 33                 "id": 1,
 34                 "content": "内容1",
 35                 "pid": ""
 36             }, {
 37                 "time": "2019-08-27",
 38                 "id": 2,
 39                 "content": "内容2",
 40                 "pid": 1
 41             }, {
 42                 "time": "2019-08-27",
 43                 "id": 3,
 44                 "content": "内容3",
 45                 "pid": 1
 46             }, {
 47                 "time": "2019-08-27",
 48                 "id": 4,
 49                 "content": "内容4",
 50                 "pid": ""
 51             }, {
 52                 "time": "2019-08-27",
 53                 "id": 5,
 54                 "content": "内容5",
 55                 "pid": 2
 56             },
 57             {
 58                 "time": "2019-08-27",
 59                 "id": 6,
 60                 "content": "内容6",
 61                 "pid": ""
 62             },
 63             {
 64                 "time": "2019-08-27",
 65                 "id": 7,
 66                 "content": "内容7",
 67                 "pid": 6
 68             },
 69         ];
 70 
 71         $(function() {
 72             $table.bootstrapTable({
 73                 data: data,
 74                 idField: 'id',
 75                 dataType: 'jsonp',
 76                 columns: [{
 77                         field: 'time',
 78                         title: '时间',
 79                         width: 140
 80                     },
 81                     {
 82                         field: 'content',
 83                         title: '主要内容'
 84                     },
 85                 ],
 86 
 87                 //在哪一列展开树形
 88                 treeShowField: 'time',
 89                 //指定父id列
 90                 parentIdField: 'pid',
 91                 onResetView: function(data) {
 92                     //console.log('load');
 93                     $table.treegrid({
 94                         initialState: 'collapsed', // 所有节点都折叠
 95                         // initialState: 'expanded',// 所有节点都展开,默认展开
 96                         treeColumn: 0,
 97                         // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
 98                         // expanderCollapsedClass: 'glyphicon glyphicon-plus',
 99                         onChange: function() {
100                             $table.bootstrapTable('resetWidth');
101                         }
102                     });
103                     //只展开树形的第一级节点
104                     //$table.treegrid('getRootNodes').treegrid('expand');
105 
106                 },
107             });
108         });
109     </script>

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

posted @ 2019-08-28 17:05  程先生哈  阅读(8110)  评论(0编辑  收藏  举报