bootstrap-table的中文api链接:https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1
bootstrap-table的官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
我使用的初始化方式是用的js初始化以及后台分页的方式，主要实现步骤为:
1.js:
createTable : function () {
$('#table_server').bootstrapTable('destroy');
$("#table_server").bootstrapTable({
url: 'vacateManage/getvacateManagePage',
sidePagination:"server",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false,
striped: true,//设置为 true 会有隔行变色效果
undefinedText: "空",//当数据为 undefined 时显示的字符
pagination: true, //分页
paginationLoop:false,//设置为 true 启用分页条无限循环的功能。
showToggle: "true",//是否显示 切换试图（table/card）按钮
showColumns: "true",//是否显示 内容列下拉框
pageNumber: 1,//如果设置了分页，首页页码
// showPaginationSwitch:true,//是否显示 数据条数选择框
pageSize: 20,//如果设置了分页，页面数据条数
pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
paginationPreText: '上一页',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '下一页',//指定分页条中下一页按钮的图标或文字,这里是>
// singleSelect: false,//设置True 将禁止多选
search: false, //显示搜索框
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
pageSize: params.limit,//页面大小
pageNumber: params.offset,//页码
sort: params.sort,
order: params.order,
//search: searchText,
startDate: $('#startDate').val(),
endDate: $('#endDate').val()
};
},
idField: "vacateId",//指定主键列
selectItemName: 'vacateId',//radio 或者 checkbox 的字段 name 名。
sortName:'vacateId',//定义排序列
sortOrder:'desc',//定义排序方式
sortStable:true,//设置为 true 将获得稳定的排序，我们会添加\_position属性到 row 数据中。
uniqueId:'vacateId',//对每一行指定唯一标识符。
clickToSelect:true,//设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
classes:'table table-hover',
queryParamsType : "limit",
detailView: true,//默认false，设为true显示detail view（细节视图）
classes: 'table text-center table-hover table-striped table-condensed table-bordered',
detailFormatter: function (index, row) {
var html = [];
$.each(row, function (key, value) {
if(key == 'holidayRemark')
html.push('<p><b>扣假明细:</b> ' + value + '</p>');
if(key == 'vacateRemark')
html.push('<p><b>请假说明:</b> ' + value + '</p>');
});
return html.join('');
},
locale:'zh-CN',
columns: [
{
field: 'tate',//json数据中rows数组中的属性名(如果是含有checkbox不需要对应)
checkbox: true,
align: 'center'//水平居中
},
{
title: '序号',
field: 'state',
align: 'center',
formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
return index+1;
}
},
{
title: 'id',
field: 'vacateId',
sortable: true,
visible: false,
align: 'center'
},
{
title: '姓名',
field: 'realName',
sortable: true,
align: 'center'
},
{
title: '申请日期',
field: 'vacateTime',
sortable: true,
align: 'center',
formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
return row.vacateTime==undefined?'':Common_Fun.formatDate(row.vacateTime,'yyyy-MM-dd');
}
},
{
title: '请假类型',
field: 'vacateType',
sortable: true,
align: 'center',
formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
if(row.vacateIdent == 1 || row.vacateIdent == 2){
return '<a href="#kjsm" role="button" οnclick="javascript:Common_Fun.model_open(1,\''+row.holidayRemark+'\')" data-toggle="modal">补休</a>';
}
if(row.vacateIdent == 1 || row.vacateIdent == 2){
return '<a href="#kjsm" role="button" οnclick="javascript:Common_Fun.model_open(1,\''+row.holidayRemark+'\')" data-toggle="modal">补休</a>';
}else if(row.vacateIdent == 3){
return '<a href="#kjsm" οnclick="javascript:Common_Fun.model_open(1,\''+row.holidayRemark+'\')" role="button" data-toggle="modal">年假</a>';
}else{
switch (row.vacateType){
case 1 :
return '产假';
break;
case 2:
return '陪产假';
break;
case 3:
return '婚假';
break;
case 4:
return '丧假';
break;
case 5:
return '病假';
break;
case 6:
return '<a href="#kjsm" οnclick="javascript:Common_Fun.model_open(1,\''+row.holidayRemark+'\')" role="button" data-toggle="modal">事假</a>';
break;
}
}
}
},
{
title: '请假开始时间',
field: 'startTime',
sortable: true,
align: 'center',
formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
return row.startTime==undefined?'':Common_Fun.formatDate(row.startTime,'yyyy-MM-dd');
}
},
{
title: '请假结束时间',
field: 'endTime',
sortable: true,
align: 'center',
formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
return row.endTime==undefined?'':Common_Fun.formatDate(row.endTime,'yyyy-MM-dd');
}
},
{
title: '请假时长',
field: 'vacateLength',
sortable: true,
align: 'center',
formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
if(row.vacateLength==undefined){
return '0小时';
}else{
return ''+(row.vacateLength/8 >= 1? parseInt(row.vacateLength/8)+'天': '')+(row.vacateLength%8 > 0? row.vacateLength%8+'小时': '')+ '';
}
}
},
{
title: '审核状态',
field: 'vacateStatus',
sortable: true,
align: 'center',
titleTooltip: function (value, row, index) {
if(row.refuseReson){
return row.refuseReson;
}else{
return '';
}
},
cellStyle : function (value, row, index) {
if(value.indexOf("不通过") != -1){
return {
css: {
"color":'red'
}
}
}else{
return '';
}
}
},
{
title: '请假说明',
field: 'vacateRemark',
sortable: true,
align: 'center',
formatter: function (value, row, index) {
return '<a href="#qjsm" role="button" οnclick="javascript:Common_Fun.model_open(2,\''+row.vacateRemark+'\')" data-toggle="modal">详情</a>';
}
},
{
title: '操作',
field: 'vacateId',
align: 'center',
formatter: function (value, row, index) {
if((row.vacateStatus.indexOf("待审核") != -1) || (row.vacateStatus.indexOf("不通过") != -1)){
return '<a class="btn btn-xs blue" type="button" href="vacateManage/'+row.vacateId+'/edit"><i class="fa fa-edit"></i> 修改</a><button class="btn btn-xs blue-hoki type="button" οnclick="Common_Fun.deleteVacateManage('+ row.vacateId +');"><i class="fa fa-remove"></i> 删除</button>';
}else{
return '<button disabled="disabled" class="btn btn-xs btn-write" type="button"><i class="fa fa-edit"></i> 修改</a><button disabled="disabled" class="btn btn-xs btn-write" type="button" οnclick="Common_Fun.deleteVacateManage(' + row.vacateId + ');"><i class="fa fa-remove"></i> 删除</button>';
}
}
}
]
});
}js主要注意的是提交方式和传的参数，如果是post提交，contentType必须为application/x-www-form-urlencoded,关于参数，api里面有明确说明:请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 返回false将会终止请求。如果参数使用的是传的pageSize或者是pageNumber到后台，后台是无法获取到参数值的，而且前端参数里面不会这些参数。
2.java的service层
public TableClicnt getVacateManagePageList2(VacateManageCondition condition,String str) {
if(condition.getVacateManage().getPage()!=null&&condition.getVacateManage().getRows()!=null){
if(str != null){
PageHelper.startPage(condition.getVacateManage().getPage(),condition.getVacateManage().getRows(),str);
}else{
PageHelper.startPage(condition.getVacateManage().getPage(),condition.getVacateManage().getRows()," T1.vacateId DESC ");
}
}
List<VacateManage> list = this.vacateManageDao.getVacateManagePageList(condition);
PageInfo pageInfo = new PageInfo(list);
TableClicnt clicnt = new TableClicnt();
clicnt.setPage(pageInfo.getPageNum());
clicnt.setTotal((int)pageInfo.getTotal());
clicnt.setRows(list);
return clicnt;
}由于我用到了PageHelper分页，所以需要转一下
3.java的controller层
@RequestMapping(value="/getvacateManagePage", method=RequestMethod.POST)
public Object getvacateManagePage(HttpServletRequest request, HttpServletResponse response){
String pageNumber = request.getParameter("pageNumber");
String pageSize = request.getParameter("pageSize");
String sort = request.getParameter("sort");
String order = request.getParameter("order");
String startDate = request.getParameter("startDate");
String endDate = request.getParameter("endDate");
User userLogin = (User)SecurityUtils.getSubject().getPrincipal();
VacateManageCondition condition = new VacateManageCondition();
condition.setIds(userLogin.getUserId()+"");
String orderBy = "";
if(pageNumber != null){
condition.getVacateManage().setPage((Integer.valueOf(pageNumber)/Integer.valueOf(pageSize))+1);
}
if(pageSize != null){
condition.getVacateManage().setRows(Integer.valueOf(pageSize));
}
if(sort != null){
orderBy +=" T1."+sort;
}else{
orderBy +=" T1.vacateId";
}
if(order != null){
orderBy +=" "+order;
}else{
orderBy +=" DESC";
}
TableClicnt pageInfo = this.vacateManageService.getVacateManagePageList2(condition,orderBy);
return pageInfo;
}4.java添加一个专门传输的实体
public class TableClicnt {
/** 行实体类 */
private List<VacateManage> rows = new ArrayList<VacateManage>();
/** 总条数 */
private int total;
private int page;
public TableClicnt() {
}
public List<VacateManage> getRows() {
return rows;
}
public void setRows(List<VacateManage> rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
}5.页面展示
<table id="table_server"></table>
1592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
