Bootstrap Table插件及使用

時間 2019-12-14

原文原文鏈接

Bootstrap Table是基於 Bootstrap 的 jQuery 表格插件，經過簡單的設置，就能夠擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。 http://bootstrap-table.wenzhixin.net.cn/zh-cn/javascript

使用：css

1.引入須要的JS和CSSjava

1 <link rel="stylesheet" href="${basePath}/css/bootstrap..css">
2 <link rel="stylesheet" href="${basePath}/css/bootstrap-table/bootstrap-table.css">
3 
4 <script src="${basePath}/js/jquery.min.js"></script>
5 <script src="${basePath}/js/bootstrap.min.js"></script>
6 <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
7 <script src="${basePath}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
8 <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table-export.js"></script>
9 <script src="${basePath}/js/plugins/bootstrap-table/tableExport.js"></script>

②.定義一個空的tablejquery

 1 <body>
 2     <div class="row base-margin" id="query">
 3         <ol class="breadcrumb">
 4             <li><strong><span style="color: #27a0d7">用戶列表</span></strong></li>
 5         </ol>
 6         <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
 7             <div class="form-group">
 8                 <label for="orgCode">部門:</label> 
 9                 <select class="form-control" id="orgCode" name="orgCode">   
10                     <option value="">默認選擇</option>
11                     <c:forEach var="data" items="${orgList}">
12                         <option value="${data.orgCode }">${data.orgName }</option>
13                     </c:forEach>
14                 </select>
15             </div>
16             <div class="form-group">
17                 <label for="userName">名稱:</label> 
18                 <input type="text" class="form-control" name="userName" id="userName"  placeholder="請輸入名稱">
19             </div>
20             <div class="form-group">
21                 <label >日期:</label>
22                 <input placeholder="開始日期" class="form-control layer-date" id="startDate" name="startDate">
23                 <input placeholder="結束日期" class="form-control layer-date" id="endDate" name="endDate">
24             </div>
25             <div class="form-group">
26                 <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查詢</button>
27             </div>
28             <div class="form-group btn-right">
29                 <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用戶</button>
30             </div>
31         </form>
32     </div>
33     <div class="container" style="width: 100%">
34         <table id="demo-table">
35         </table>
36     </div>
37 </body>

③.初始化table表格（建議把初始化的JS代碼寫到另外的自定義js頁面中，代碼還挺長的），具體的各個參數能夠查看API。json

  1 <script type="text/javascript">
  2 $(function () {
  3     initTable();
  4     initDate();
  5 });
  6 
  7 function doQuery(params){
  8     $('#demo-table').bootstrapTable('refresh');    //刷新表格
  9 }
 10 
 11 function initTable(){
 12     var url = "user.do?method=listUsers&random="+Math.random();
 13     $('#demo-table').bootstrapTable({
 14         method:'POST',
 15         dataType:'json',
 16         contentType: "application/x-www-form-urlencoded",
 17         cache: false,
 18         striped: true,                              //是否顯示行間隔色
 19         sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
 20         url:url,
 21         height: $(window).height() - 110,
 22         width:$(window).width(),
 23         showColumns:true,
 24         pagination:true,
 25         queryParams : queryParams,
 26         minimumCountColumns:2,
 27         pageNumber:1,                       //初始化加載第一頁，默認第一頁
 28                pageSize: 20,                       //每頁的記錄行數（*）
 29               pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
 30               uniqueId: "id",                     //每一行的惟一標識，通常爲主鍵列
 31         showExport: true,                    
 32         exportDataType: 'all',
 33         responseHandler: responseHandler,
 34         columns: [
 35         {
 36             field: '',
 37                     title: 'Sort No.',
 38                     formatter: function (value, row, index) {
 39                     return index+1;
 40              }
 41         },
 42         {
 43             field : 'id',
 44             title : 'User ID',
 45             align : 'center',
 46             valign : 'middle',
 47             sortable : true
 48         }, {
 49             field : 'institutionCode',
 50             title : 'Institution Code',
 51             align : 'center',
 52             valign : 'middle',
 53             sortable : true
 54         }, {
 55             field : 'institutionName',
 56             title : 'Institution Name',
 57             align : 'center',
 58             valign : 'middle'
 59         }, {
 60             field : 'loginId',
 61             title : 'Login Name',
 62             align : 'center',
 63             valign : 'middle',
 64             sortable : true
 65         }, {
 66             field : 'realName',
 67             title : 'Real Name',
 68             align : 'center',
 69             valign : 'middle'
 70         }, {
 71             field : 'createTime',
 72             title : 'Create Time',
 73             align : 'center',
 74             valign : 'left',
 75             formatter : function (value, row, index){
 76                 return new Date(value).format('yyyy-MM-dd hh:mm:ss');
 77             }
 78         }, {
 79             field : 'homeAddress',
 80             title : 'Address',
 81             align : 'center',
 82             valign : 'middle'
 83         }]
 84     });
 85 }
 86 
 87 function initDate(){
 88     var start = {
 89             elem: '#startDate',
 90             format: 'YYYY-MM-DD hh:mm:ss',
 91             min: laydate.now(-7),       
 92             max: laydate.now(),
 93             istime: true,
 94             istoday: false,
 95             choose: function (datas) {
 96                 end.min = datas; //開始日選好後，重置結束日的最小日期
 97                 end.start = datas //將結束日的初始值設定爲開始日
 98             }
 99         };
100         var end = {
101             elem: '#endDate',
102             format: 'YYYY-MM-DD hh:mm:ss',
103             min: laydate.now(-7),       
104             max: laydate.now(),
105             istime: true, //是否開啓時間選擇
106             isclear: true, //是否顯示清空
107             istoday: true, //是否顯示今天
108             issure: true, //是否顯示確認
109             choose: function (datas) {
110                 start.max = datas; //結束日選好後，重置開始日的最大日期
111             }
112         };
113         laydate(start);
114         laydate(end);
115 }
116 
117 function queryParams(params) {
118     var param = {
119         orgCode : $("#orgCode").val(),
120         userName : $("#userName").val(),
121         startDate : $("#startDate").val(),
122         endDate : $("#endDate").val(),
123         limit : this.limit, // 頁面大小
124         offset : this.offset, // 頁碼
125         pageindex : this.pageNumber,
126         pageSize : this.pageSize
127     }
128     return param;
129 } 
130 
131 // 用於server 分頁，表格數據量太大的話 不想一次查詢全部數據，可使用server分頁查詢，數據量小的話能夠直接把sidePagination: "server"  改成 sidePagination: "client" ，同時去掉responseHandler: responseHandler就能夠了，
132 function responseHandler(res) { 
133     if (res) {
134         return {
135             "rows" : res.result,
136             "total" : res.totalCount
137         };
138     } else {
139         return {
140             "rows" : [],
141             "total" : 0
142         };
143     }
144 }
145 </script>