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 100%; 7 height: 50px; 8 border: 1px #ddd solid; 9 padding: 5px; 10 min- 600px; 11 } 12 #select-form label{ 13 250px; 14 height: 40px; 15 padding: 6px; 16 } 17 #select-form label input{ 18 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.效果图
刚想贴图，发现服务器炸了······下次再贴 看这个的时候对着文档一起看。