java +bootstrap table 完整例子
需求：现在常用的table 插件很多， 比如 jquey datatables ,不过操作挺 麻烦， 看到推荐的bootstrap 自带的 table，就用到项目来，先看效果：
功能包括常用的， 添加， 删除， 批量删除， 查询， 修改。
添加：
==================
Java的框架， 是 springboot
先看下后台代码：
aside.html 左侧菜单：
html 代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 6 <title>全民发布</title> 7 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/> 8 <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/> 9 <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.css"/> 10 <link rel="stylesheet" href="/bootstrap/css/bootstrap-editable.css"/> 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/> 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/> 13 <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.css"/> 14 <link rel="stylesheet" href="/dist/css/AdminLTE.min.css"/> 15 <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css"/> 16 17 </head> 18 <body class="hold-transition skin-blue sidebar-mini"> 19 <div th:replace="fragment/header :: header"></div> 20 <div th:replace="fragment/aside :: aside"></div> 21 <div class="wrapper"> 22 23 <div class="content-wrapper"> 24 25 <section class="content-header"> 26 <h1> 27 客户管理 28 <small>客户列表</small> 29 </h1> 30 <ol class="breadcrumb"> 31 <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li> 32 <li class="active">首页</li> 33 </ol> 34 </section> 35 <section class="content"> 36 <div class="row"> 37 <div class="panel-body" style="padding-bottom:0px;"> 38 <div id="toolbar" class="btn-group"> 39 <button id="btn_add" type="button" class="btn btn-success" onclick="btn_add()"> 40 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 41 </button> 42 <button id="remove" class="btn btn-danger" > 43 <i class="glyphicon glyphicon-remove"></i> 删除 44 </button> 45 </div> 46 <div class="box"> 47 <!-- /.box-header --> 48 <div class="box-body"> 49 <table id="tb_customer" data-response-handler="responseHandler"> 50 </table> 51 </div> 52 </div> 53 </div> 54 <!-- /.col --> 55 </div> 56 <!-- /.row --> 57 </section> 58 <!-- /.content --> 59 </div> 60 <div th:replace="customer/customer-form :: customer-form"></div> 61 62 </div> 63 <!-- ./wrapper --> 64 65 <!-- jQuery 2.2.3 --> 66 <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script> 67 <!-- Bootstrap 3.3.6 --> 68 <script src="/bootstrap/js/bootstrap.min.js"></script> 69 <script src="/bootstrap/js/bootstrap-table.js"></script> 70 <script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script> 71 <script src="/bootstrap/js/bootstrap-table-editable.js"></script> 72 <script src="/bootstrap/js/bootstrap-editable.js"></script> 73 <!-- DataTables --> 74 <script src="/plugins/datatables/jquery.dataTables.min.js"></script> 75 <script src="/plugins/datatables/dataTables.bootstrap.min.js"></script> 76 <!-- SlimScroll --> 77 <script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script> 78 <!-- FastClick --> 79 <script src="/plugins/fastclick/fastclick.js"></script> 80 <!-- AdminLTE App --> 81 <script src="/dist/js/app.min.js"></script> 82 <!-- AdminLTE for demo purposes --> 83 <script src="/dist/js/demo.js"></script> 84 <script type="text/javascript" src="/js/jquery.cookie.js"></script> 85 <!-- page script --> 86 <script> 87 88 selections = []; 89 $(function () { 90 //1.初始化Table 91 var oTable = new TableInit(); 92 oTable.Init(); 93 94 //2.初始化Button的点击事件 95 var oButtonInit = new ButtonInit(); 96 oButtonInit.Init(); 97 98 }); 99 100 101 102 var TableInit = function () { 103 var oTableInit = new Object(); 104 //初始化Table 105 oTableInit.Init = function () { 106 $('#tb_customer').bootstrapTable({ 107 url: '/customer-data', //请求后台的URL（*） 108 method: 'get', //请求方式（*） 109 toolbar: '#toolbar', //工具按钮用哪个容器 110 striped: true, //是否显示行间隔色 111 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 112 pagination: true, //是否显示分页（*） 113 sortable: false, //是否启用排序 114 sortOrder: "asc", //排序方式 115 queryParams: oTableInit.queryParams,//传递参数（*） 116 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） 117 pageNumber:1, //初始化加载第一页，默认第一页 118 pageSize: 10, //每页的记录行数（*） 119 pageList: [10], //可供选择的每页的行数（*） 120 search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 121 strictSearch: true, 122 showColumns: true, //是否显示所有的列 123 showRefresh: true, //是否显示刷新按钮 124 minimumCountColumns: 2, //最少允许的列数 125 clickToSelect: true, //是否启用点击选中行 126 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 127 uniqueId: "id", //每一行的唯一标识，一般为主键列 128 showToggle:true, //是否显示详细视图和列表视图的切换按钮 129 cardView: false, //是否显示详细视图 130 detailView: false, //是否显示父子表onEditableSave 131 columns: [{ 132 checkbox: true 133 }, { 134 field: 'uid', 135 title: '客户id' 136 137 }, { 138 field: 'mobile', 139 title: '联系方式' 140 141 }, { 142 field: 'doubleSumMoney', 143 title: '总充值金额(元)' 144 145 }, { 146 field: 'createTimeStr', 147 title: '创建时间' 148 149 } 150 , { 151 field: 'updateTimeStr', 152 title: '修改时间' 153 154 } 155 , { 156 field: 'operate', 157 title: '操作', 158 align: 'center', 159 events: operateEvents, 160 formatter: operateFormatter 161 } 162 163 164 ], 165 onEditableSave: function (field, row, oldValue, $el) { 166 $.ajax({ 167 type: "post", 168 url: "/edit", 169 data: { strJson: JSON.stringify(row) }, 170 success: function (data, status) { 171 if (status == "success") { 172 alert("编辑成功"); 173 } 174 }, 175 error: function () { 176 alert("Error"); 177 }, 178 complete: function () { 179 180 } 181 182 }); 183 } 184 }); 185 }; 186 187 188 189 //得到查询的参数 190 oTableInit.queryParams = function (params) { 191 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 192 limit: params.limit, //页面大小 193 offset: params.offset, //页码 194 search:params.search 195 }; 196 return temp; 197 }; 198 return oTableInit; 199 }; 200 201 202 var ButtonInit = function () { 203 var oInit = new Object(); 204 var postdata = {}; 205 206 oInit.Init = function () { 207 //初始化页面上面的按钮事件 208 }; 209 210 return oInit; 211 }; 212 213 function btn_add(){ 214 $("#myModalLabel").text("添加客户"); 215 $('#myModal').modal(); 216 217 } 218 219 function operateFormatter(value, row, index) { 220 return [ 221 '<a class="like" href="javascript:void(0)" title="Like">', 222 '<i class="fa fa-pencil-square-o"></i>', 223 '</a> ', 224 '<a class="remove" href="javascript:void(0)" title="Remove">', 225 '<i class="glyphicon glyphicon-remove"></i>', 226 '</a>' 227 ].join(''); 228 } 229 230 window.operateEvents = { 231 'click .like': function (e, value, row, index) { 232 $("#myModalLabel").text("编辑客户"); 233 $("#mobile").attr("value",row.mobile); 234 $("#money").attr("value",row.doubleSumMoney); 235 $("#id").attr("value",row.id); 236 $("#index").attr("value",index); 237 $('#myModal').modal(); 238 239 }, 240 'click .remove': function (e, value, row, index) { 241 $.ajax({ 242 type: "post", 243 url: "/delete-customer", 244 data: { strJson: row.id }, 245 success: function (data, status) { 246 if (status == "success") { 247 alert("删除成功"); 248 } 249 }, 250 error: function () { 251 alert("Error"); 252 }, 253 complete: function () { 254 255 } 256 257 }); 258 $('#tb_customer').bootstrapTable('remove', { 259 field: 'id', 260 values: [row.id] 261 }); 262 263 } 264 }; 265 function save(){ 266 $.ajax({ 267 type: "post", 268 url: "/edit-cus", 269 data:$('#dataFrom').serialize(), 270 success: function (data, status) { 271 if (status == "success") { 272 $('#myModal').modal('hide'); 273 $('#tb_customer').bootstrapTable('refresh'); 274 275 } 276 }, 277 error: function () { 278 alert("Error"); 279 }, 280 complete: function () { 281 282 } 283 284 }); 285 286 287 } 288 289 function getIdSelections() { 290 return $.map($('#tb_customer').bootstrapTable('getSelections'), function (row) { 291 return row.id 292 }); 293 } 294 295 296 function responseHandler(res) { 297 $.each(res.rows, function (i, row) { 298 row.state = $.inArray(row.id, selections) !== -1; 299 }); 300 return res; 301 } 302 $('#remove').click(function () { 303 var ids = getIdSelections(); 304 $('#tb_customer').bootstrapTable('remove', { 305 field: 'id', 306 values: ids 307 }); 308 $.ajax({ 309 type: "post", 310 url: "/delete-customer", 311 data: { strJson: ids.toString() }, 312 success: function (data, status) { 313 if (status == "success") { 314 alert("删除成功"); 315 } 316 }, 317 error: function () { 318 alert("Error"); 319 }, 320 complete: function () { 321 322 } 323 324 }); 325 $('#tb_customer').bootstrapTable('refresh'); 326 }); 327 328 </script> 329 </body> 330 </html>
Java代码：
只要JSON 返回了rows , total ,数据就会展示在列表
