java +bootstrap table 完整例子

時間 2019-11-21
標籤 java bootstrap table 完整例子欄目 Java 简体版
原文原文鏈接
需求：如今經常使用的table 插件不少，好比 jquey datatables ,不過操做挺麻煩，看到推薦的bootstrap 自帶的 table，就用到項目來，先看效果：javascript
功能包括經常使用的，添加，刪除，批量刪除，查詢，修改。css
添加：html
==================java
Java的框架，是 springbootjquery
先看下後臺代碼：ajax
aside.html 左側菜單：spring
html 代碼：bootstrap
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <meta charset="utf-8"/>
  5   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6   <title>全民發佈</title>
  7   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  8   <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
  9     <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.css"/>
 10       <link rel="stylesheet" href="/bootstrap/css/bootstrap-editable.css"/>
 11   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
 12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
 13   <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.css"/>
 14   <link rel="stylesheet" href="/dist/css/AdminLTE.min.css"/>
 15   <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css"/>
 16 
 17 </head>
 18 <body class="hold-transition skin-blue sidebar-mini">
 19  <div th:replace="fragment/header :: header"></div>
 20    <div th:replace="fragment/aside :: aside"></div>
 21 <div class="wrapper">
 22 
 23   <div class="content-wrapper">
 24   
 25     <section class="content-header">
 26       <h1>
 27                      客戶管理
 28         <small>客戶列表</small>
 29       </h1>
 30       <ol class="breadcrumb">
 31         <li><a href="#"><i class="fa fa-dashboard"></i> 主頁</a></li>
 32         <li class="active">首頁</li>
 33       </ol>
 34     </section>
 35     <section class="content">
 36       <div class="row">
 37          <div class="panel-body" style="padding-bottom:0px;">
 38         <div id="toolbar" class="btn-group">
 39             <button id="btn_add" type="button" class="btn  btn-success" onclick="btn_add()">
 40                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
 41             </button>
 42            <button id="remove" class="btn btn-danger" >
 43             <i class="glyphicon glyphicon-remove"></i> 刪除
 44            </button>
 45         </div>
 46            <div class="box">
 47             <!-- /.box-header -->
 48             <div class="box-body">
 49         <table id="tb_customer" data-response-handler="responseHandler">
 50         </table>
 51          </div>
 52         </div>
 53     </div>
 54         <!-- /.col -->
 55       </div>
 56       <!-- /.row -->
 57     </section>
 58     <!-- /.content -->
 59   </div>
 60 <div th:replace="customer/customer-form :: customer-form"></div>
 61   
 62 </div>
 63 <!-- ./wrapper -->
 64 
 65 <!-- jQuery 2.2.3 -->
 66 <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
 67 <!-- Bootstrap 3.3.6 -->
 68 <script src="/bootstrap/js/bootstrap.min.js"></script>
 69 <script src="/bootstrap/js/bootstrap-table.js"></script>
 70 <script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
 71 <script src="/bootstrap/js/bootstrap-table-editable.js"></script>
 72 <script src="/bootstrap/js/bootstrap-editable.js"></script>
 73 <!-- DataTables -->
 74 <script src="/plugins/datatables/jquery.dataTables.min.js"></script>
 75 <script src="/plugins/datatables/dataTables.bootstrap.min.js"></script>
 76 <!-- SlimScroll -->
 77 <script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
 78 <!-- FastClick -->
 79 <script src="/plugins/fastclick/fastclick.js"></script>
 80 <!-- AdminLTE App -->
 81 <script src="/dist/js/app.min.js"></script>
 82 <!-- AdminLTE for demo purposes -->
 83 <script src="/dist/js/demo.js"></script>
 84 <script type="text/javascript" src="/js/jquery.cookie.js"></script> 
 85 <!-- page script -->
 86 <script>
 87 
 88 selections = [];
 89 $(function () {
 90     //1.初始化Table
 91     var oTable = new TableInit();
 92     oTable.Init();
 93 
 94     //2.初始化Button的點擊事件
 95     var oButtonInit = new ButtonInit();
 96     oButtonInit.Init();
 97 
 98 });
 99 
100 
101 
102 var TableInit = function () {
103     var oTableInit = new Object();
104     //初始化Table
105     oTableInit.Init = function () {
106         $('#tb_customer').bootstrapTable({
107             url: '/customer-data',         //請求後臺的URL（*）
108             method: 'get',                      //請求方式（*）
109             toolbar: '#toolbar',                //工具按鈕用哪一個容器
110             striped: true,                      //是否顯示行間隔色
111             cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
112             pagination: true,                   //是否顯示分頁（*）
113             sortable: false,                     //是否啓用排序
114             sortOrder: "asc",                   //排序方式
115             queryParams: oTableInit.queryParams,//傳遞參數（*）
116             sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
117             pageNumber:1,                       //初始化加載第一頁，默認第一頁
118             pageSize: 10,                       //每頁的記錄行數（*）
119             pageList: [10],        //可供選擇的每頁的行數（*）
120             search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
121             strictSearch: true,
122             showColumns: true,                  //是否顯示全部的列
123             showRefresh: true,                  //是否顯示刷新按鈕
124             minimumCountColumns: 2,             //最少容許的列數
125             clickToSelect: true,                //是否啓用點擊選中行
126             height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
127             uniqueId: "id",                     //每一行的惟一標識，通常爲主鍵列
128             showToggle:true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
129             cardView: false,                    //是否顯示詳細視圖
130             detailView: false,                   //是否顯示父子表onEditableSave
131             columns: [{
132                 checkbox: true
133             }, {
134                 field: 'uid',
135                 title: '客戶id'
136                 
137             }, {
138                 field: 'mobile',
139                 title: '聯繫方式'
140              
141             }, {
142                 field: 'doubleSumMoney',
143                 title: '總充值金額(元)'
144               
145             }, {
146                 field: 'createTimeStr',
147                 title: '建立時間'
148                 
149             }
150             , {
151                 field: 'updateTimeStr',
152                 title: '修改時間'
153                
154             }
155             , {
156                 field: 'operate',
157                 title: '操做',
158                 align: 'center',
159                 events: operateEvents,
160                 formatter: operateFormatter
161             }
162             
163             
164             ],
165          　　　onEditableSave: function (field, row, oldValue, $el) {
166              $.ajax({
167                  type: "post",
168                  url: "/edit",
169                  data: { strJson: JSON.stringify(row) },
170                  success: function (data, status) {
171                      if (status == "success") {
172                          alert("編輯成功");
173                      }
174                  },
175                  error: function () {
176                      alert("Error");
177                  },
178                  complete: function () {
179 
180                  }
181 
182              });
183          }
184         });
185     };
186     
187    
188 
189     //獲得查詢的參數
190   oTableInit.queryParams = function (params) {
191         var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
192             limit: params.limit,   //頁面大小
193             offset: params.offset,  //頁碼
194             search:params.search
195         };
196         return temp;
197     };
198     return oTableInit;
199 };
200 
201 
202 var ButtonInit = function () {
203     var oInit = new Object();
204     var postdata = {};
205 
206     oInit.Init = function () {
207         //初始化頁面上面的按鈕事件
208     };
209 
210     return oInit;
211 };
212 
213 function btn_add(){
214       $("#myModalLabel").text("添加客戶");
215        $('#myModal').modal();
216      
217 }
218 
219 function operateFormatter(value, row, index) {
220     return [
221          '<a class="like" href="javascript:void(0)" title="Like">',
222             '<i class="fa fa-pencil-square-o"></i>',
223             '</a>  ',
224         '<a class="remove" href="javascript:void(0)" title="Remove">',
225         '<i class="glyphicon glyphicon-remove"></i>',
226         '</a>'
227     ].join('');
228 }
229 
230 window.operateEvents = {
231         'click .like': function (e, value, row, index) {
232         $("#myModalLabel").text("編輯客戶");
233         $("#mobile").attr("value",row.mobile);
234           $("#money").attr("value",row.doubleSumMoney); 
235           $("#id").attr("value",row.id);
236           $("#index").attr("value",index);
237             $('#myModal').modal();
238               
239         },
240         'click .remove': function (e, value, row, index) {
241               $.ajax({
242                 type: "post",
243                 url: "/delete-customer",
244                 data: { strJson: row.id },
245                 success: function (data, status) {
246                     if (status == "success") {
247                         alert("刪除成功");
248                     }
249                 },
250                 error: function () {
251                     alert("Error");
252                 },
253                 complete: function () {
254 
255                 }
256 
257             });
258             $('#tb_customer').bootstrapTable('remove', {
259                 field: 'id',
260                 values: [row.id]
261             });
262       
263         }
264     };
265     function save(){
266          $.ajax({
267             type: "post",
268             url: "/edit-cus",
269             data:$('#dataFrom').serialize(),
270             success: function (data, status) {
271                 if (status == "success") {
272                     $('#myModal').modal('hide');
273                     $('#tb_customer').bootstrapTable('refresh');
274             
275                 }
276             },
277             error: function () {
278                 alert("Error");
279             },
280             complete: function () {
281 
282             }
283 
284         });
285         
286         
287     }
288     
289     function getIdSelections() {
290         return $.map($('#tb_customer').bootstrapTable('getSelections'), function (row) {
291             return row.id
292         });
293     }
294 
295     
296     function responseHandler(res) {
297         $.each(res.rows, function (i, row) {
298             row.state = $.inArray(row.id, selections) !== -1;
299         });
300         return res;
301     }
302     $('#remove').click(function () {
303         var ids = getIdSelections();
304         $('#tb_customer').bootstrapTable('remove', {
305             field: 'id',
306             values: ids
307         });
308         $.ajax({
309             type: "post",
310             url: "/delete-customer",
311             data: { strJson: ids.toString() },
312             success: function (data, status) {
313                 if (status == "success") {
314                     alert("刪除成功");
315                 }
316             },
317             error: function () {
318                 alert("Error");
319             },
320             complete: function () {
321 
322             }
323 
324         });
325         $('#tb_customer').bootstrapTable('refresh');
326     });
327 
328 </script>
329 </body>
330 </html>