1. 定义 bootStrap table引入文件 inc_tb.jsp
<script src="/script/bootstrap-table/bootstrap-table.js"></script>
<link href="/css/bootstrap-table.css" rel="stylesheet" />
<script src="/script/bootstrap-table/bootstrap-table-zh-CN.js"></script>2. 添加 testPaperTable.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BootStrap Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>positionTable</title>
<!--switch css-->
<link rel="stylesheet" href="/css/switch.css" type="text/css">
<!--引入 jquery 和 bootstrap -->
<%@ include file="/WEB-INF/jsp/top.jsp"%>
<!--引入bootstrap table-->
<%@ include file="/WEB-INF/jsp/inc_tb.jsp"%>
<!--引入该页面运行的js 文件-->
<script src="/js/testPaper/testPaperTable.js"></script>
<!--日期转化-->
<script src="/js/StudyUtils.js"></script>
<script src="/js/cookie.js"></script>
<script type="text/javascript">
var testPaperTableUrl="/testPaper/listTable?courseBianMa="+"${courseBianMa}";
var courseBianMa="${courseBianMa}";
function testPaper_add(){
window.location="/testPaper/goAdd?courseBianMa="+"${courseBianMa}";
}
function testPaperContent_list(){
//得到 bootStrap table 选定的行
var rowsArray = $("#tb_testPaper").bootstrapTable('getSelections');
if(rowsArray.length>1){
alert("只能选择一行");
return;
}
if(rowsArray.length==0){
alert("请选择一行");
return;
}
//var testPaperJson = JSON.stringify();
var testPaperId =rowsArray[0].testpaperId;
//在cookie中保存courseBianMa
//去试卷内容添加页面
window.location="/testPaperContent/goTable?testPaperId="+testPaperId+"&courseBianMa="+courseBianMa;
}
</script>
</head>
<body>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default"
onclick="testPaper_add()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增试卷
</button>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default"
onclick="testPaperContent_list()">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>查看 试卷内容
</button>
</div>
<!--空的表格-->
<table id="tb_testPaper"></table>
</body>
</html>3. 编写 testPaperTable.js
var $table;
//初始化bootstrap-table的内容
function InitMainTable () {
//记录页面bootstrap-table全局变量$table，方便应用
var queryUrl =testPaperTableUrl;
$table = $('#tb_testPaper').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: 10, //每页的记录行数（*）
pageList: [1, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索
strictSearch: true,
showColumns: true, //是否显示所有的列（选择显示的列）
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数4 clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "testpaperId", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//向后台发送的数据
queryParams: function (params) {
return {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
search: params.search
}
},
columns: [{
checkbox: true
}, {
field: 'name',
title: 'id'
},
{
field: 'testyear',
title: '年'
}, {
field: 'visionId',
title: '版本id'
},{
field:'testpaperId',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}],
onLoadSuccess: function () {
},
onLoadError: function () {
showTips("数据加载失败！");
},
onDblClickRow: function (row, $element) {
var id = row.ID;
EditViewById(id, 'view');
},
//接受到后台的数据
responseHandler: function (res) {
return {
total: res.total,
rows: res.rows //数据
};
}
});
}
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('"+id+"')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
function TimeFtt(value, row, index){
if(value!=null){
var dateTime = new Date(value);
return StudyUtils.dateFormat.dateFtt("yyyy-MM-dd hh:mm:ss",dateTime);
}
}
/**
function dateFtt(fmt,date)
{ //author: meizz
}
**/
$(function () {
InitMainTable();
});4. 因为 表格 中用到了日期转换，需要编写日期转换 工具类 StudyUtils
var StudyUtils={
/**
* 日期操作模块
*/
dateFormat:{
dateFtt:function(fmt,date){
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
}
}
5. 服务端接收请求 返回的数据 格式
List<Testpaper> list = testPaperMapper.selectByExample(testExample);
PageInfo<Testpaper> pageInfo = new PageInfo<>(list);
Map<String,Object> map= new HashMap<String,Object>();
map.put("total", pageInfo.getTotal());
map.put("rows", list);
return map;