JavaScript知识点：SpringMVC+bootstraptable实例详解
2017-9-7编辑:daibenhua
本文通过实例给大家介绍了SpringMVC+bootstrap-table,需要的朋友可以参考下
bootstrap-table下载地址：https://github.com/wenzhixin/bootstrap-table/
先来看一张效果图：
下载下来后，需要导入的css：由于需要bootstrap的支持，所以需要导入bootstrap的css
?
|
1
2
3
4
5 |
rel="external nofollow" rel="stylesheet"> rel="external nofollow" rel="stylesheet"> |
需要导入的js：除了bootstrap的js跟table的js外第一个要导入的就是jQuery的js，他们都是基于jQuery开发的
?
|
1
2
3
4
5
6 |
|
bootstrap-table-zh-CN.js这个js是用来汉化table的提示文字的，在下载下来的bootstrap-table文件夹下的locale文件夹中有很多的语言包支持
完啦，我们只需要在html页面中声明一个table跟菜单div(如果不需要，可以不声明)就好：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
|
table_sysUser就是我们要显示的table列表啦。
我们来看看js怎么来请求后台的数据，并进行分页跟查询：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 |
//项目根目录 var path = $("#contextPath").val(); $(document).ready(function() { //初始化Table var oTable = new TableInit(); oTable.Init(); //初始化页面上面的按钮事件 $("#btn_add").click(function(){ //新增 }); $("#btn_edit").click(function(){ //编辑 }); $("#btn_info").click(function(){ //详情 }); $("#btn_delete").click(function(){ //删除 }); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#table_sysUser').bootstrapTable({ url: path+'/sysuser/findUser.action', //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: true, //是否启用排序 sortName:"id", sortOrder: "desc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） queryParamsType: 'limit', sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 15, //每页的记录行数（*） pageList: [10, 15, 20, 50], //可供选择的每页的行数（*） search: true, //是否显示表格搜索 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 contentType: "application/x-www-form-urlencoded", //解决POST提交问题 columns: [ {checkbox: true }, {title:'用户名称',field: 'userName',sortable:true }, {title:'手机号码',field: 'phone',sortable:true, formatter:function(v,r,i){ if(v){ return v.substring(0,3)+"****"+v.substring(7,4); } return v; } }, {title:'邮箱账号',field: 'email',sortable:true }, {title:'生日',field: 'birthday',sortable:true }, {title:'部门',field: 'departmentKey',sortable:true, formatter:function(v,r,i){ if(r.departmentValue){ return r.departmentValue; } return ""; } }, {title:'最后登录时间',field: 'lastLogintime',sortable:true }, {title:'性别',field: 'sex',sortable:true, formatter:function(v,r,i){ switch (Number(v)) { case 1: return "男"; break; case 2: return "女"; break; default: return "未知"; break; } } }, {title:'用户状态',field: 'status',sortable:true, formatter:function(v,r,i){ return r.statusCn == "false"?"启用":"禁用"; } }, {title:'所属公司编号',field: 'companyId',sortable:true }, {title:'注册时间',field: 'createTime',sortable:true }, {title:'用户头像',field: 'userhead',sortable:true }, {title:'职位',field: 'positionKey',sortable:true}, {title:'角色',field:'role'}] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 pageSize: params.limit, //页面大小 //页码 //排序列名 //排序方式 //搜索框参数 }; return temp; }; return oTableInit; }; |
很多参数在代码注释里面说得很明显啦，我们来说说怎么新增查询参数，我们只需要在queryParams方法里面在新增参数信息就行：
?
|
1
2
3
4
5
6
7
8
9
10
11 |
oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 pageSize: params.limit, //页面大小 pageNumber: params.pageNumber, //页码 sortName: params.sort, //排序列名 sortOrder:params.order, //排序方式 searchText:params.search, //搜索框参数 searchText:params.search, //搜索框参数 }; return temp; }; |
bootstrap-table获取页面上勾选的数据：
?
|
1 |
var rowData = $("#table_sysUser").bootstrapTable("getSelections"); |
bootstrap-table刷新表格：
?
|
1 |
$('#table_sysUser').bootstrapTable('refresh'); |