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">×</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.效果图
刚想贴图,发现服务器炸了······下次再贴 看这个的时候对着文档一起看。
转载于:https://www.cnblogs.com/alongup/p/9324670.html
bootstrap Table的使用方法相关推荐
- Bootstrap table方法,Bootstrap table事件,配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
- Bootstrap Table插件 页面跳转后再回来保存搜索的值
2019独角兽企业重金招聘Python工程师标准>>> 场景:在一个内容比较多的列表页面中,使用bootstrap table的搜索功能后,选择某列,点击此列中一个按钮,跳转到详情页 ...
- bootstrap Table表头固定
简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表头固定 ...
- bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
- bootstrap-table为空_JS组件Bootstrap Table使用方法详解
最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时 ...
- bootstrap table php,Bootstrap Table使用方法详解
bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前 ...
- html表格右键可编辑,Bootstrap table右键功能实现方法
最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/w ...
- Bootstrap Table列宽拖动的方法
Bootstrap Table可拖动列,需要用到它的Resizable扩展插件 需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依 ...
- bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
最新文章
- Normal2Height工具已经完成
- mysql variables_通过什么命令能够改变mysql的variables的变量里的值?
- distributed representations的意义
- highcharts如何把图多余的空白页面_零基础如何快速学会WORD基础操作?有秘籍了.........
- JS之函数实际参数转换成数组的方法[].slice.call(arguments)
- 在Java中使用FileChannel和ByteBuffer对文件进行读写
- ASP.NET生成WORD文档服务器部署注意事项
- 7-107 汉诺塔的非递归实现 (25 分)
- Android 8.0 学习(3)---Android Treble
- 重新想象 Windows 8.1 Store Apps (91) - 后台任务的新特性: 下载和上传的新特性, 程序启动前预下载网络资源, 后台任务的其它新特性...
- This is why you don’t think you’re creative 你为什么会觉得自己没有创造力?
- 中国渔船数量不断下降,海洋渔船下降速度较慢「图」
- Hibernate(四)
- BaaS、FaaS、Serverless都是什么馅儿?
- 微信外卖小程序 怎么计算与客户的距离_3分钟搞定微信小程序类美团用户商家距离计算...
- php语言有哪些特性,盘点PHP编程语言具有的特性
- 12306快手,初始版本发布。匆忙写了个,不喜勿用
- Linux cp 复制文件或复制文件夹
- 【ArcGIS】连接到数据库失败,临时文件I/O错误--可能$SDEHOME/temp已满
- 计算机英语合成词大全,常用的英语合成词大全