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

Bertha 。 2023-06-05 11:24 8阅读 0赞

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

![1103600-20190828163036593-1965729337.gif][]

废话不多说，直接上代码！所有的数据都是走的本地，如果大家想改的话可以自己改，但是需要注意的是，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>

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

转载于:https://www.cnblogs.com/daniao11417/p/11425146.html

[1103600-20190828163036593-1965729337.gif]: /images/20230601/81efeddbc1eb408784bc07f7ec6b36f2.png