bootstrap-table 經常使用總結-樹形結構

時間 2019-11-10

標籤 bootstrap table 經常使用總結結構欄目 Bootstarp 简体版

原文原文鏈接

　　關於樹形結構，上篇文章若是仍是不能理解的話，請看這一篇。把其餘的沒有用到的功能都去掉，只留最基礎的樹形結構！javascript

　　廢話很少說，直接上代碼！全部的數據都是走的本地，若是你們想改的話能夠本身改，可是須要注意的是，pid也就查找的父元素的字段和父元素的id字段，數據格式須要保持一致，能夠都是number類型，也能夠都是string類型，二者須要統一css

  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>