Bootstrap-table介绍
在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、移动列位置等一些特殊的功能,插件可以用基于HTML5的data-*属性标识设置,也可以使用Javascript方式进行设置,非常方便。
效果图
js代码
var $table;
var rows = 5;
function initMainTable() { //初始化bootstrap-table的内容
//记录页面bootstrap-table全局变量$table,方便应用
var queryUrl = 'welcome';
$table = $('#grid').bootstrapTable({
url: queryUrl, //请求后台的URL(*)
method: 'GET', //请求方式(*)
toolbar: '.toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
pageSize: rows, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索
strictSearch: true,
showColumns: true, //是否显示所有的列(选择显示的列)
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令(desc,asc)
};
return temp;
},
columns: [{
checkbox: true,
visible: true //是否显示复选框
}, {
field: 'sno',
title: '学号',
sortable: true
}, {
field: 'sname',
title: '姓名',
sortable: true
}, {
field: 'isMale',
title: '性别',
sortable: true,
formatter: genderFormatter
}, {
field: 'birth',
title: '生日'
}, {
field:'sno',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}, ],
onLoadSuccess: function () {
},
onLoadError: function () {
alert("数据加载失败!");
},
onDblClickRow: function (row, $element) {
var id = row.sno;
edit(id);
},
responseHandler: responseHandler,
});
};
function actionFormatter(value, row, index) { //操作栏的格式化
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"view(" + id + ")\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"edit(" + id + ")\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"del(" + id + ")\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
/**
* 获取返回的数据的时候做相应处理,让bootstrap table认识我们的返回格式
* @param {Object} res
*/
function responseHandler(res) {
return {
"rows": res.data.rows, // 具体每一个bean的列表
"total": res.data.total // 总共有多少条返回数据
}
}
//性别字段格式化
function genderFormatter(value) {
var gender;
if (value == false) {
color = 'Red';
gender = '小姐姐';
}
else if (value == true) {
color = 'Blue';
gender = '大帅哥';
}
else { color = 'Yellow'; }
return '<div style="color: ' + color + '">' + gender + '</div>';
}
html代码
<div>
<table id="grid" class="table" data-toolbar=".toolbar"></table>
</div>
<div id="toolbar" class="toolbar">
<button type="button" class="btn btn-primary" onclick="add();">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
</button>
</div>
java代码
package com.yzc.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.yzc.utils.DBUtil;
@WebServlet("/welcome")
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
public void service(HttpServletRequest req, HttpServletResponse resp) {
PrintWriter pw = null;
Connection conn = null;
PreparedStatement stmt = null;
//解决响应正文内容包含中文会出现乱码的问题
resp.setContentType("application/json;charset=utf-8");
//
int rows = Integer.parseInt(req.getParameter("rows"));
//
int page = Integer.parseInt(req.getParameter("page"));
//
int begin = (page-1)*rows;
StringBuilder str = new StringBuilder();
try {
pw = resp.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
conn = DBUtil.getConnection();
stmt = conn.prepareStatement("SELECT COUNT(*) FROM STUDENT");
ResultSet rs = stmt.executeQuery();
rs.next();
str.append("{\"result\":\"success\",\"message\":\"\",\"data\":{\"total\":"+rs.getInt(1)+",\"rows\":[");
stmt = conn.prepareStatement("SELECT * FROM STUDENT ORDER BY SNO LIMIT ?,?");
stmt.setInt(1, begin);
stmt.setInt(2, rows);
rs = stmt.executeQuery();
while(rs.next()) {
str.append("{\"sno\":"+rs.getInt(1)+","+
"\"sname\":\""+rs.getString(2)+"\""+",\"isMale\":"+rs.getString(3).equals("男")+",\"birth\":"+
"\""+rs.getDate(4)+"\""+",\"url\":\""+rs.getString(5)+"\"},");
}
str = new StringBuilder(str.substring(0, str.length()-1));
str.append("]}}");
System.out.println(str);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
pw.println(str);
}
}
html完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<link rel="stylesheet" href="bootstrap-table/css/bootstrap-table.css">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/js/bootstrap-table.js"></script>
<script src="bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="js/student.js"></script>
<script type="text/javascript">
$(function(){
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
initMainTable();
})
</script>
</head>
<body class="bg-info">
<!--导航层-->
<div>
<!--菜单列表-->
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="javascript:void(0);">学生基本信息管理</a></li>
<li role="presentation"><a href="javascript:void(0);">学生档案</a></li>
<li role="presentation"><a href="javascript:void(0);">学生就业情况</a></li>
</ul>
</div>
<div>
<table id="grid" class="table" data-toolbar=".toolbar"></table>
</div>
<div id="toolbar" class="toolbar">
<button type="button" class="btn btn-primary" onclick="add();">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
</button>
</div>
<!-- 模态框(Modal) -->
<div class="modal fade" id="edit" 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>
<h3 class="modal-title" id="subject"></h3>
</div>
<div class="modal-body">
<form role="form" id="register">
<div class="form-group" id="first">
<label for="sid">学号</label> <input type="text"
class="form-control" id="sid" name="sid" readonly>
</div>
<div class="form-group">
<label for="sname">姓名</label> <input type="text"
class="form-control" id="sname" name="sname" placeholder="请输入姓名">
</div>
<label for="name">性別</label>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="gender" id="male" value="1" checked> 靓仔
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="female" value="0"> 美女
</label>
</div>
<div class="form-group">
<label for="birth">生日</label>
<div class="input-group date form_date" data-date="" data-date-format="yyyy MM dd" data-link-field="birth" data-link-format="yyyy-mm-dd">
<input name="birth" id="birth" class="form-control" type="text" value="" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label for="photo">上传头像</label>
<input type="file" id="photo" name="photo">
<p class="help-block">请上传jpg或者png格式的文件!</p>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" onclick="upload();">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> 上传
</button>
</div>
<div hidden="hidden">
<input type="text" name="filePath" id="filePath" value="images/default.png"/>
</div>
<div class="form-group">
<img width="120" height="120" src="images/default.png" id="photo2"/>
</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" onclick="save();">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
js完整代码
var $table;
var rows = 5;
function initMainTable() { //初始化bootstrap-table的内容
//记录页面bootstrap-table全局变量$table,方便应用
var queryUrl = 'welcome';
$table = $('#grid').bootstrapTable({
url: queryUrl, //请求后台的URL(*)
method: 'GET', //请求方式(*)
toolbar: '.toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
pageSize: rows, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索
strictSearch: true,
showColumns: true, //是否显示所有的列(选择显示的列)
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令(desc,asc)
};
return temp;
},
columns: [{
checkbox: true,
visible: true //是否显示复选框
}, {
field: 'sno',
title: '学号',
sortable: true
}, {
field: 'sname',
title: '姓名',
sortable: true
}, {
field: 'isMale',
title: '性别',
sortable: true,
formatter: genderFormatter
}, {
field: 'birth',
title: '生日'
}, {
field:'sno',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}, ],
onLoadSuccess: function () {
},
onLoadError: function () {
alert("数据加载失败!");
},
onDblClickRow: function (row, $element) {
var id = row.sno;
edit(id);
},
responseHandler: responseHandler,
});
};
function actionFormatter(value, row, index) { //操作栏的格式化
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"view(" + id + ")\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"edit(" + id + ")\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"del(" + id + ")\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
/**
* 获取返回的数据的时候做相应处理,让bootstrap table认识我们的返回格式
* @param {Object} res
*/
function responseHandler(res) {
return {
"rows": res.data.rows, // 具体每一个bean的列表
"total": res.data.total // 总共有多少条返回数据
}
}
//性别字段格式化
function genderFormatter(value) {
var gender;
if (value == false) {
color = 'Red';
gender = '小姐姐';
}
else if (value == true) {
color = 'Blue';
gender = '大帅哥';
}
else { color = 'Yellow'; }
return '<div style="color: ' + color + '">' + gender + '</div>';
}
function add(){
$("#subject").text("注册学生信息");
$("#first").hide();
$("#register")[0].reset();
$("#photo2").attr("src","images/default.png");
//$("#edit").css("display","block");
$('.form_date').datetimepicker("setDate", new Date());
$('#edit').modal('show');
}
function edit(sid){
$("#register")[0].reset();
$("#subject").text("修改学生信息");
$("#first").show();
$("#photo2").attr("src","images/default.png");
//var sid = $(e).parent().siblings().first().text();
//alert(sid);
$.ajax({
//几个参数需要注意一下
type: "GET",//方法类型
cache: false,
dataType: "json",//预期服务器返回的数据类型
url: "edit?sid="+sid ,//url
success: function (data) {
//console.log(data);//打印服务端返回的数据(调试用)
if (data.result == "success") {
var stu = data.data;
$("#sid").val(stu.sno);
$("#sname").val(stu.sname);
if(stu.isMale){
$("#male").prop("checked",true);
}else{
$("#female").prop("checked",true);
}
$("#birth").val(stu.birth);
$("#filePath").val(stu.filePath);
$("#photo2").attr("src",stu.filePath);
$('#edit').modal('show');
}
},
error : function() {
alert("异常!");
}
});
}
function save(){
$.ajax({
//几个参数需要注意一下
type: "post",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "save" ,//url
data: $("#register").serialize(),
success: function (data) {
//console.log(data);//打印服务端返回的数据(调试用)
if (data.result == "success") {
$('#edit').modal('hide');
//$("#edit").css("display","none");
//$("#register")[0].reset();
//$("#photo2").attr("src","images/default.png");
//alert(data.message);
$table.bootstrapTable('refresh');
}
},
error : function() {
alert("异常!");
}
});
}
function upload(){
var file = $("#photo").get(0).files[0];
var formData = new FormData();
formData.append("source",file);
$.ajax({
url:"upload/file",
type:"post",
dataType:"json",
cache:false,
data:formData,
contentType:false,
processData:false,
success:function(data){
if(data.result=="success"){
$("#photo2").attr("src",data.url);
$("#filePath").val(data.url);
}
console.log("hello test");
}
});
}
function del(sid){
//var sid = $(e).parent().siblings().first().text();
var yesOrNo = confirm("确定要删除该学生么?");
if(yesOrNo){
$.ajax({
//几个参数需要注意一下
type: "GET",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "delete?sid="+sid ,//url
success: function (data) {
console.log(data.message);//打印服务端返回的数据(调试用)
if (data.result == "success") {
$table.bootstrapTable('refresh');
}
},
error : function() {
alert("异常!");
}
});
}
}
参考资料
[01] Bootstrap-table 使用总结
[02] Bootstrap Table使用心得总结
[03] JDBC 中得到 ResultSet 结果集的大小(元素个数)
[04] bootstrapTable刷新当前页码不变和从第一页开始查询
[05] bootstraptable嵌入工具栏
[06] 刷新出现页码混乱的问题
[07] bootstrap-table数据刷新后留在当前页
微信扫一扫关注公众号
点击链接加入群聊
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号:511619105