当前位置：首页 >前端技术 > java +bootstrap table 完整例子

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 //初始化Table105 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,//是否显示父子表onEditableSave131 columns: [{132 checkbox: true133 }, {134 field: 'uid',135 title: '客户id'136 137 }, {138 field: 'mobile',139 title: '联系方式'140  141 }, {142 field: 'doubleSumMoney',143 title: '总充值金额(元)'144145 }, {146 field: 'createTimeStr',147 title: '创建时间'148 149 }150 , {151 field: 'updateTimeStr',152 title: '修改时间'153154 }155 , {156 field: 'operate',157 title: '操作',158 align: 'center',159 events: operateEvents,160 formatter: operateFormatter161 }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 187188 189 //得到查询的参数190   oTableInit.queryParams = function (params) {191 var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的192 limit: params.limit,//页面大小193 offset: params.offset,  //页码194 search:params.search195 };196 retu temp;197 };198 retu 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 retu oInit;211 };212 213 function btn_add(){214   $("#myModalLabel").text("添加客户");215 $('#myModal').modal();216  217 }218 219 function operateFormatter(value, row, index) {220 retu [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();238239 },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 });262263 }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 retu $.map($('#tb_customer').bootstrapTable('getSelections'), function (row) {291 retu row.id292 });293 }294 295 296 function responseHandler(res) {297 $.each(res.rows, function (i, row) {298 row.state = $.inArray(row.id, selections) !== -1;299 });300 retu res;301 }302 $('#remove').click(function () {303 var ids = getIdSelections();304 $('#tb_customer').bootstrapTable('remove', {305 field: 'id',306 values: ids307 });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>