需求：现在常用的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 ,数据就会展示在列表
时间： 2024-11-07 18:32:49