bootstrap Table的使用方法

1.官网

　　url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/　　文档包含了表格属性、列属性、事件、方法等等.

2.引入库

　　只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用默认有写data-toggle=”table”,data-toggle应该知道吧，常用的有”tooltip、popover等等”，这边就不说了.

3.定义住表单

1 <!-- 主表单 -->
2     <table id="datatable"></table>
3 <!-- /主表单 -->

3.表格的增删改查(功能很完整)　

  1 <!DOCTYPE HTML>
  2 <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  3 <head th:include="@{import} :: head"></head>
  4 <style type="text/css">
  5     #select-form{
  6         width: 100%;
  7         height: 50px;
  8         border: 1px #ddd solid;
  9         padding: 5px;
 10         min-width: 600px;
 11     }
 12     #select-form label{
 13         width: 250px;
 14         height: 40px;
 15         padding: 6px;
 16     }
 17     #select-form label input{
 18         width: 200px;
 19         height: 30px;
 20         outline: none;
 21         font-size: 12px;
 22         text-indent: 20px;
 23         font-weight: normal;
 24         border-radius: 3px;
 25         border: none;
 26         border: 1px #ddd solid;
 27     }
 28     #select-form button{
 29         outline: none;
 30         cursor: pointer;
 31     }
 32 </style>
 33 <body>
 34 
 35 <!-- nav -->
 36 <section th:include="@{import} :: nav"></section>
 37 
 38 <!-- container start -->
 39 <div class="wrapper">
 40 <div class="container-fluid" id="main-container">
 41     <div class="row">
 42         <!-- section of left menu -->
 43         <div class="col-md-1 col-sm-12" th:include="@{import} :: leftMenu"></div>
 44         <!-- /section of left menu -->
 45         
 46         <!-- section of main 主表单区域 -->
 47         <section class="col-md-11 col-sm-12 box">
 48             <!-- 用于显示警告信息 -->
 49             <div id="alert"></div>
 50             
 51             <!-- 表单按钮 -->
 52             <div id="toolbar" class="btn-group btn-group-sm">
 53                 <button id="btn_add" type="button" class="btn btn-default">
 54                     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
 55                 </button>
 56                 <button id="btn_edit" type="button" class="btn btn-default" disabled="true">
 57                     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
 58                 </button>
 59                 <button id="btn_delete" type="button" class="btn btn-default" disabled="true">
 60                     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
 61                 </button>
 62             </div>
 63             <!-- /表单按钮 -->
 64             <!--搜索框-->
 65             <div id="select-form">
 66                 <label class="control-label">
 67                     <span>名称：</span><input type="text" class="select-name" placeholder="请输入用户名称"/>
 68                 </label>
 69                 <label class="control-label">
 70                     <span>描述：</span><input type="text" class="select-description" placeholder="请输入描述"/>
 71                 </label>
 72                 <button class="btn btn-default btn-sm btn-search bt">搜索</button>
 73             </div>
 74             <!--/搜索框-->
 75             <!-- 主表单 -->
 76             <table id="datatable"></table>
 77             <!-- /主表单 -->
 78 
 79             <!-- 新增/编辑 表单 -->
 80             <div class="modal fade" id="datatable-editor" tabindex="-1" role="dialog" aria-labelledby="datatable-editor">
 81                 <div class="modal-dialog" role="document">
 82                     <div class="modal-content">
 83                         <div class="modal-header">
 84                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 85                                 <span aria-hidden="true">&times;</span>
 86                             </button>
 87                             <h4 class="modal-title" id="myModalLabel">编辑表单</h4>
 88                         </div>
 89                         <div class="modal-body">
 90                             <form class="form-horizontal" id="form">
 91                                 <input type="hidden" name="id" id="id" />
 92                                 <input type="hidden" name="_method" id="_method" />
 93                                 <div class="form-group">
 94                                     <label for="name" class="col-md-2 control-label">名称</label>
 95                                     <div class="col-md-10">
 96                                         <input type="text" name="name" id="name" class="form-control" placeholder="名称">
 97                                     </div>
 98                                 </div>
 99                                 <div class="form-group">
100                                     <label for="description" class="col-md-2 control-label">描述</label>
101                                     <div class="col-md-10">
102                                         <input type="text" name="description" id="description" class="form-control" placeholder="描述">
103                                     </div>
104                                 </div>
105                             </form>
106                         </div>
107                         <div class="modal-footer">
108                             <button type="button" id="btn-ok" class="btn btn-primary pt-close">保存</button>
109                             <button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
110                         </div>
111                     </div>
112                 </div>
113             </div>
114             <!-- /新增/编辑 表单 -->
115             
116             <!-- 删除确认 -->
117             <div class="modal fade" id="datatable-confirm" tabindex="-1" role="dialog" aria-labelledby="datatable-confirm">
118                 <div class="modal-dialog" role="document">
119                     <div class="modal-content">
120                         <div class="modal-header">
121                             <h4 class="modal-title">删除确认</h4>
122                         </div>
123                         <div class="modal-body">
124                             <p>确认删除以下数据,此操作不可恢复?</p>
125                             <ul class="list-group" id="delete-list"></ul>
126                         </div>
127                         <div class="modal-footer">
128                             <button type="button" id="btn-ok" class="btn btn-primary pt-close">确认</button>
129                             <button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
130                         </div>
131                     </div>
132                 </div>
133             </div>
134             <!-- /删除确认 -->
135         </section>
136         <!-- /section of main -->
137     </div>
138 </div>
139 </div>
140 <!--/.container end-->
141 
142 <script th:inline="javascript">
143 $(document).ready(function() {
144     var tableEditor = $("#datatable-editor");
145     var URL = {
146         insert : {url : "/system/role/roles" , method : "POST"},
147         update : {url : "/system/role/roles" , method : "PUT"},
148         "delete" : {url : "/system/role/roles/batch" , method : "DELETE"}
149     }
150     
151     var getEditorInsert = function() {
152         tableEditor.find("#_method").val(URL.insert.method);
153         var url = URL.insert.url;
154         return {editor : tableEditor, url : url};
155     }
156     
157     var getEditorUpdate = function(id) {
158         tableEditor.find("#_method").val(URL.update.method);
159         var url = URL.update.url + "/" + id;
160         return {editor : tableEditor, url : url};
161     }
162     
163     var getEditorDelete = function() {
164         var url = URL["delete"].url;
165         return {editor : tableEditor, url : url , method: URL["delete"].method};
166     }
167     
168     /* 表格操作 */
169     //    根据选中项目数切换按钮点击状态
170     var changeToolbarStatus = function(row,tr) {
171         var select = $('#datatable').bootstrapTable('getSelections');
172         $("#toolbar").find("#btn_edit").attr("disabled",select.length != 1);
173         $("#toolbar").find("#btn_delete").attr("disabled",select.length == 0);
174     }
175     // 表格属性
176     var initTable = function() {
177         $('#datatable').bootstrapTable({
178             showColumns: true,
179             toolbar: "#toolbar",
180             iconSize: "sm",
181             idField : "id",
182             clickToSelect: true,
183             
184             url: "roles",
185             contentType: "application/x-www-form-urlencoded",
186             dataField : "rows",
187             queryParams: function(params) {
188                 params["std.offset"] = params.offset;
189                 params["std.limit"] = params.limit;
190                 return params;
191             },
192             
193             sidePagination: "server",
194             pagination: true,
195             pageNumer: 1,
196             pageSize: 20,
197             pageList: [20,50,100],
198             
199             columns:[
200                 {
201                     title:'',
202                     field:'_select',
203                     checkbox:true,
204                     align:'center'
205                 },
206                 {
207                     title: "ID",
208                     field: "id",
209                     visible: false
210                 },
211                 {
212                     title: "名称",
213                     field: "name"
214                 },
215                 {
216                     title: "描述",
217                     field: "description"
218                 }
219             ],
220             
221             onCheck: changeToolbarStatus,
222             onUncheck: changeToolbarStatus
223         });
224     }
225     initTable();
226     
227     
228     // ajax提交数据后的操作
229     var onSubmitOver = function(data) {
230         if(data.success)
231             $("#datatable").bootstrapTable("refresh");
232         else {
233             var html = '<div class="alert alert-warning alert-dismissible fade in" role="alert">';
234             html += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>';
235             html += '<p>' + data.errorMsg + '</p>';
236             html += '</div>';
237             $("#alert").append(html);
238         }    
239     }
240     
241     // 用于打开编辑表单
242     var openEditor = function(editor,onBeforeOpen) {
243         return new Promise(function(resolve,reject) {
244             if(onBeforeOpen)
245                 onBeforeOpen(editor.editor.find("form"));
246             
247             editor.editor.modal('show');
248             editor.editor.find("input[type=text]:first")[0].focus();
249             
250             editor.editor.find("#btn-ok").on("click",function() {
251                 var data = editor.editor.find("form").serializeArray();
252                 resolve(data);
253                 editor.editor.modal("hide");
254             });
255             editor.editor.find("#btn-cancel").on("click",function() {
256                 reject();
257             });
258             
259         });
260     }
261     // 用于对第一个输入框聚焦
262     tableEditor.on("shown.bs.modal",function() {
263         tableEditor.find("input[type=text]:first")[0].focus();
264     });
265     // 关闭时清除form内容
266     tableEditor.on("hidden.bs.modal",function() {
267         tableEditor.find(":input").not(':button,:submit,:reset').val("");
268     });
269     
270     // 打开新增表单
271     $("#toolbar").find("#btn_add").on("click",function() {
272         var editor = getEditorInsert();
273         openEditor(editor).then(function(data) {
274             var submitParam = {};
275             for(idx in data) {
276                 var item = data[idx];
277                 if(item.name != "id") {
278                     submitParam[item.name] = item.value;
279                 }
280             }
281             $.post(editor.url,submitParam,onSubmitOver,'json');
282         });
283     });    
284     
285     // 打开编辑表单
286     $("#toolbar").find("#btn_edit").on("click",function() {
287         var select = $('#datatable').bootstrapTable('getSelections');
288         var line = select[0];
289         
290         var beforeOpen = function(form) {
291             $.each(line,function(key,value) {
292                 form.find("#" + key).val(value);
293             });
294         }
295         var editor = getEditorUpdate(line.id);
296         openEditor(editor,beforeOpen).then(function(data) {
297             var submitParam = {};
298             for(idx in data) {
299                 var item = data[idx];
300                 submitParam[item.name] = item.value;
301                 
302             }
303             //console.info(submitParam)
304             $.post(editor.url,submitParam,onSubmitOver,'json');
305         });
306     });
307     
308     // 删除确认
309     var deleteConfirm = function() {
310         return new Promise(function(resolve,reject) {
311             var select = $('#datatable').bootstrapTable('getSelections');
312             if(select.length == 0) {
313                 reject();
314                 return;
315             }
316             
317             $("#datatable-confirm").find("#btn-ok").on("click",function() {
318                 resolve(select);
319                 $("#datatable-confirm").modal("hide");
320             });
321             $("#datatable-confirm").find("#btn-cancel").on("click",function() {
322                 reject();
323             });
324             $("#datatable-confirm").modal("show");
325         });
326     }
327     // 删除按钮点击
328     $("#toolbar").find("#btn_delete").on("click",function() {
329         var editor = getEditorDelete();
330         deleteConfirm().then(function(select) {
331             var ids = [];
332             $.each(select,function(idx,item) {
333                 ids.push(item.id);
334             });
335         
336             $.post(editor.url,{"_method":editor.method,ids:ids},onSubmitOver,'json');
337         });
338     });
339     //    查询用户    
340     var oInp=document.querySelector('.select-name');
341     var oSet=document.querySelector('.select-description');
342     var searchName=null,searchDes=null;
343     var str='';
344     var arrDate=[];
345     function getName(){
346         searchName = oInp.value;
347     }
348     function getDes(){
349         searchDes = oSet.value;
350     }
351     oInp.oninput = getName;
352     oSet.oninput = getDes;
353     $('#select-form').find('.btn-search').on('click',function(){
354         //按name和description检索
355         if(searchName!= null && searchDes!= null){
356             $.ajax({
357                 async: false,
358                 type: "get",
359                 url:'http://*.*.*.*:8090/system/role/roles',
360                 contentType : "application/x-www-form-urlencoded; charset=utf-8",
361                 data:{
362                     name:searchName,
363                     description:searchDes
364                 },
365                 success: function (res) {
366                     $('#datatable').bootstrapTable('removeAll')　　//删除表格数据
367                     $('#datatable').bootstrapTable('append', res.rows)　　//新增表格数据
368                 },
369                 error: function (err) {
370                     console.log('服务器有误'+err)
371                 }
372            })
373         //按name搜索
374         }else if(searchName != '' && searchDes == null){
375             $.ajax({
376                 async: false,
377                 type: "get",
378                 url:'http://*.*.*.*:8090/system/role/roles',
379                 contentType : "application/x-www-form-urlencoded; charset=utf-8",
380                 data:{
381                     name:searchName
382                 },
383                 success: function (res) {
384                     $('#datatable').bootstrapTable('removeAll')　　//删除表格数据
385                     $('#datatable').bootstrapTable('append', res.rows)　　//新增表格数据
386                 },
387                 error: function (err) {
388                     console.log('服务器有误'+err)
389                 }
390            })
391         }else if(searchName == null && searchDes != ''){
392             $.ajax({
393                 async: false,
394                 type: "get",
395                 url:'http://*.*.*.*:8090/system/role/roles',
396                 contentType : "application/x-www-form-urlencoded; charset=utf-8",
397                 data:{
398                     description:searchDes
399                 },
400                 success: function (res) {
401                     $('#datatable').bootstrapTable('removeAll')　　//删除所有表格数据
402                     $('#datatable').bootstrapTable('append', res.rows)　　//新增表格数据
403                 },
404                 error: function (err) {
405                     console.log('服务器有误'+err)
406                 }
407            })
408         }
409     })
410 });
411 </script>
412 <!-- footer -->
413 <div th:include="@{import} :: footer"></div>
414 </body>
415 </html>

4.中文文档

　　https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1(网站转载)

5.效果图

　　刚想贴图，发现服务器炸了······下次再贴看这个的时候对着文档一起看。

posted @ 2018-07-17 17:48 阿龙丶along 阅读(791) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端攻城狮

bootstrap Table的使用方法

公告