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.效果圖
剛想貼圖，發現伺服器炸了······下次再貼 看這個的時候對著文件一起看。