bootstrap Table的使用方法
程序员文章站
2022-07-01 20:29:46
1.官网 url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 文档包含了表格属性、列属性、事件、方法等等. 2.引入库 只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就 ......
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">×</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.效果图
刚想贴图，发现服务器炸了······下次再贴 看这个的时候对着文档一起看。