近期做数据库课设,用到的一个前端展示Table的工具——bootstrap-table,在这里记录一下其用法
概述
Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中。官方网址。里面可以下载使用所需的JS和CSS文件,以及参考文档和例子。
Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式。
所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出来,然后转换成JSON格式传到要显示的界面中,在JavaWeb中可以保存在request中,然后转发到指定界面,在界面初始化的时候使用EL表达式获取,然后调用相关初始化的函数,将JSON字符串传进去即可显示。客户端模式较为简单,它是把数据一次性加载出来放到界面上,然后根据你设置的每页记录数,自动生成分页。当点击第二页时,会自动加载出数据,不会再向服务器发送请求。同时用户可以使用其自带的搜索功能,可以实现全数据搜索。对于数据量较少的时候,可以使用这个方法。但是对于数据量大的系统,使用该方法会造成加载出一些很久之前的,用户不在关注的数据,使得加载速度变慢,增加了服务器的负担,浪费了资源。这时应该采用服务器模式。
所谓服务器模式,指的是根据设定的每页记录数和当前要显示的页码,发送数据到服务器进行查询,然后再显示到表格中。该方法可以根据用户的需要动态的加载数据,节省了服务器的资源,但是不能使用其自带的全数据搜索功能。因为你加载的数据只是一页的数据,所以全数据搜索的范围也只在一页之中。
这篇文章就以客户端模式为例,服务器模式在客户端模式的基础要多做一个后端分页的处理。
最终做到效果如下:
![enter description here][1]
前端
HTML文件中引入相关的JS和CSS,定义一个表格标签,配置相关的boostrap-table属性。
1 | <%@ page language="java" contentType="text/html; charset=utf-8" |
在js代码中,使用bootstarpTable对id为productTable的表格进行初始化,其中url参数为请求发送的地址,method为请求发送的方法,dataField为返回的json数据中table要展示的数据在是哪个key对应的value,columns为Table的栏位的定义,也对应的返回的json数据中的各个栏位。
1 | $('#productTable').bootstrapTable({ |
json 数据实例:1
2
3
4
5
6
7
8
9
10
11{
"data":
[
{
"id":"XXXXXX",
"name": "语文",
"type": "必修",
"credit": 4.0
}
]
}
后端
后端要做的事情就是接受前端发来的请求,返回要展示的table数据就行了(按照相应的格式)
主要处理代码如下: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"/course/list") (
public class GetCourselistServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
CourseDaoImpl c = new CourseDaoImpl();
List<Course> res = c.getAllCourse();
String jsonStr = Obj2Json.Course2Json(res); // 将获得Course List数据转化为json格式
PrintWriter out = null;
try {
out = response.getWriter();
out.write(jsonStr);
} catch (IOException e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}
}
增删改
首先就是要在前端加两个输入表单的table:(这里只放修改的div代码,增加表单的代码类似)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<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改课程</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>课程ID</label> <input type="text" class="form-control"
id="updateId">
</div>
<div class="form-group">
<label>课程名称</label> <input type="text" class="form-control"
id="updateName">
</div>
<div class="form-group">
<label>课程类型</label>
<select id="updateType" class="form-control">
<option value=0>必修</option>
<option value=1>选修</option>
</select>
</div>
<div class="form-group">
<label>学分</label> <input type="number" class="form-control"
id="updateCredit">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="updateConfirmBtn">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
然后就是JavaScript对增删改的处理了,这个应该是这个里面最关键的东西: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// 单独删除按键
function del(id) {
if (confirm("是否删除?")) {
$.ajax({
url : "/course/delete",
method: "post",
data : {
"id" : id
},
success : function(data) {
alert("删除成功!");
//重新加载表格
$("#table").bootstrapTable("refresh");
}
});
} else {
}
}
//编辑按钮点击事件
var idGlobal = 0;
function edit(id,name) {
$("#updateModal").modal('show');
idGlobal = id;
//信息
$("#updateId").val(id);
$("#updateName").val(name);
$("#updateType").val(0);
$("#updateCredit").val("");
}
//编辑模态框下确认按钮的点击事件
$("#updateConfirmBtn").click(function() {
$("#updateModal").modal('hide');
$.ajax({
url : "/course/update",
method : 'post',
data : {
id : idGlobal,
name : $("#updateName").val(),
type: $("#updateType").val(),
credit: $("#updateCredit").val()
},
success : function() {
alert("修改成功!");
//重新加载表格
$("#table").bootstrapTable("refresh");
}
});
});
//添加按钮点击事件
$("#btn_save").click(function() {
//借用修改的模态框
$("#saveModal").modal('show');
//清楚输入框信息
$("#saveId").val("");
$("#saveName").val("");
$("#saveType").val(0);
$("#saveCredit").val("");
});
//添加用户模态框下的确认按钮点击事件
$("#saveConfirmBtn").click(function() {
$("#saveModal").modal('hide');
$.ajax({
url : "/course/add",
method : 'post',
datatype:'json',
data : {
id : $("#saveId").val(),
name : $("#saveName").val(),
type: $("#saveType").val(),
credit: $("#saveCredit").val()
},
success : function() {
alert("添加成功!");
//重新加载表格
$("#productTable").bootstrapTable("refresh");
}
});
});
后端代码就是常规的处理逻辑,根据get请求的参数实施对数据库的操作
[1]: https://data2.liuin.cn/story-writer/2018_1_19_1516292440320.jpg “效果”