本人在使用过程中也参考了网上很多其他的bootstrap的使用文章,有的写的非常详细,我的此篇文章中只写了怎么具体使用,没有使用详解及bootstraptable源码分析。
首先是先写jsp页面,以下是写在head里的需要引用css及js文件,这个文件可以自己下载,放在自己工程的文件夹下,“<c:url value='' />”这种形式是采用的工程运行的相对路径访问的形式,该种形式首先得在页面上先定义<c:set var="path" value="${pageContext.request.contextPath}" />,避免工程实际部署中因为绝对路径找不到的问题:
<link href="<c:url value='dist/css/bootstrap.min.css'/>" rel="stylesheet">
<link href="<c:url value='dist/css/bootstrap-table.min.css'/>" rel="stylesheet">
<link href="theme.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="<c:url value='dist/js/bootstrap.min.js'/>"></script>
<script src="<c:url value='assets/js/ie-emulation-modes-warning.js'/>"></script>
<script src="<c:url value='dist/js/bootstrap-table.min.js'/>"></script>
<script src="<c:url value='dist/js/bootstrap-table-zh-CN.min.js'/>"></script>
页面中间在想要展示表格的位置加上table标签,注意此处的id,需要自己设置,最好设置有特殊意义的,下面还会用到
<table id="table" data-sortable="true"></table>
以下是完成表格初始化的script处的代码,我只列出我怎么使用的,下面的注释有的是从网上copy的,columns:[]里面的field是要展示的字段名称,该名称需要跟后台返回到前台的json里的字段名称相同,bootstrapTable会根据json数据自己,至于bootstaptable怎么更深入的使用或者各个参数的细节,可以参看bootstraptable的官方文档。
<script>
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
function displayExportIcon(data){
if(data=="1"){
return true;
}else{
return false;
}
}
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col == 0)
result = "\\@";
return result;
} //导出相关功能
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#table').bootstrapTable({
url:'<c:url value="/license/get"/>', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器,搜索
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "dsc", //排序方式
singleSelect : true, //单选
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 15, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: false,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 600, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识,一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: displayExportIcon(${isAdmin}), //是否显示导出按钮
buttonsAlign:"right", //按钮位置
exportTypes:['excel'], //导出文件类型
exportDataType:"all",
Icons:'glyphicon-export',
exportOptions:{
// ignoreColumn: [0,1], //忽略某一列的索引
fileName: 'license统计表', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: '统计表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
onMsoNumberFormat: DoOnMsoNumberFormat
}, //下面的columns是要显示列表
columns: [{
checkbox: true,
title: '选择'
}, {
title: '项目编号',
field: 'id',
width: 20,
},{
title: '项目名称',
field: 'projectName',
width: 40,
}],
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
projectName: $("#txt_projectName").val(),
macAddress: $("#txt_macAddress").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
return oInit;
};
</script>
后台数据提交到前台,后台中的/license/get即为表格中的数据请求,return list,返回的list数据既为要展示的数据,是一些和service层、dao层、mapper层交互得到的数据,暂时这里先不详细列,如果想要简单试下,可以自己简单写一个返回list数据的example。
@Autowired
private LicenseService licenseService;
@RequestMapping(value = "/license/get",method = RequestMethod.GET)
@ResponseBody
//常出现请求的时候404,原因是jsp中的路径没有使用绝对路径,如果返回的不是model 页面,需要加上@ResponseBody
public List<Map<String, Object>> showLicenseSelected(HttpServletRequest request) {
List<Map<String,Object>> list = licenseService.findAll();
for (Map<String,Object> tmp : list){
System.err.println(tmp);
}
System.err.println(list);
int totalcount = licenseService.count();
return list;
}