BootStrap-table表格 -- Demo
BootStrap + JQuery
业务1:
tips : (筛选部分 数据库中没有的参数可以传一个状态到后端 比如: -1, 0, 1... )
(后端持久层使用的SpringDataJpa,筛选框的参数也会作为条件参数,传到fandAll查询所有的方法中)
但是, 如果这个筛选框参数不固定, 后期还会增加, 就不能这样了, 我是直接把字符串传过去, 后台判断的 (模糊查询), 但感觉不太好 .
核心代码:
function tableBoxPeople() {
$("#tables").bootstrapTable('destroy'); //加载前先销毁
$('#tables').bootstrapTable({
url: '/XXXXXX/findAll',
method: 'post',
contentType: "application/x-www-form-urlencoded",
queryParamsType: 'limit', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
queryParams: function (params) { //参数
let startTime = '';
let endTime = '';
let teacherName = '';
if (appVue.date != null) {
startTime = appVue.date[0];
endTime = appVue.date[1];
}
let username = appVue.inp_search;
teacherName = appVue.value;
return {
pageNum: params.offset / params.limit,
pageSize: params.limit,
startTime: startTime,
endTime: endTime,
username: username,
teacherName: teacherName
};
}, // 向后台传递的自定义参数
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
sidePagination: 'server', //后端分页
uniqueId: "id",
pageSize: "10",
pageList: [10, 20], //可选择单页记录数
pagination: true, // 是否分页
sortable: false, // 是否启用排序
columns: [{
field: 'id',
title: '序号',
width: 70,
formatter: function (value, row, index) { //行序号
var options = $('#tables').bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
},
{
field: 'username',
title: '用户名称',
},
{
field: 'eduTeacher',
title: '帮教老师',
},
{
field: 'status',
title: '帮教状态',
formatter: function (value, row, index) {
if (row.status === "已帮教"){
return '<span class="green"></span>'+row.status;
} else {
return '<span class="red"></span>'+row.status;
}
}
},
{
field: 'remark',
title: '备注',
},
{
field: 'createTime',
title: '创建时间',
width: 200,
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
formatter: actionFormatter,
}
],
responseHandler: function (res) {
// debugger
console.log(res)
return {
rows: res.data.data.content,
total: res.data.data.totalElements,
totalPages: res.data.data.totalPages
}
}
})
function actionFormatter(value, row, index) {
var htm =
'</button><button class="caozuo" data-toggle="modal" data-target="#edit" onclick=" updateModel.findByStudentId(' + row.id + ')">修改</button><button class="caozuo" onclick="del(' + row.id + ')">删除</button>'
return htm;
}
}
function del(id) {
layer.confirm("确定要删除吗?", {title: '提示'}, function () {
$.post("/XXXXXX/deleteById", {id: id}, function (res) {
if (res.success) {
layer.msg('删除成功', {icon: 1});
tableBoxPeople();
} else {
layer.msg('删除失败', {icon: 1});
}
})
}, function () {
layer.msg('取消删除', {icon: 6});
});
}
业务2:
核心代码:
$(function () { //进页面后加载 tableBox()方法
tableBox()
});
//查询所有分页方法(后端持久层使用的spring-jpa,筛选框的参数也会作为条件参数,传到fandAll查询所有的方法中)
function tableBox() {
$("#tables").bootstrapTable('destroy'); //加载前先销毁
//$("#tables").bootstrapTable("hideLoading"); //这行是想解决加载表格时出现加载字样的问题, 但未解决
$('#tables').bootstrapTable({
url: "/XXXXXX/findAll", //请求接口url
method: "post", //请求方式
contentType: "application/x-www-form-urlencoded", //内容类型
sidePagination: "server", //分页端(server:服务器分页; client:客户端分页)
queryParams: function (params) { //参数
return {
pageNum: (params.offset / params.limit), //修改默认分页参数: 当前页 pageNum
pageSize: params.limit, //修改默认分页参数: 每页条数 pageSize
name: $("#schoolName").val() // 这个是页面筛选框需要输入一个名字参数 name
};
},
toolbar: '#toolbar',
striped: false,
cache: false, //缓存
pagination: true,
sortable: false, //是否排序
pageNumber: 1,
pageSize: 10,
pageList: [10, 20],
onClickRow: function (row, $element) {
},
responseHandler: function (res) { //返回数据格式 !!!
return res.data;
},
columns: [{
field: 'no',
title: '序号',
width:'100',
formatter: function (value, row, index) { //序号
var options = $('#tables').bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
},
{
field: "schoolName",
title: "学校名称",
},
{
field: "addmissionNum",
title: "录取人数",
width: 100,
},
{
field: 'price',
title: '操作',
width: 400,
align: 'center',
formatter: function (value, row) {
/**
* TODO 前端页面
* 已完成: 数据表格
* 未完成: 右边的按钮(查看信息需要跳转页面,前端还没给); 需要从后端传一个状态来判断是橘色还是灰色
*
* TODO 后端
* 未完成: 共同问题(权限使用的shiro,用户id不需要传递,直接使用封装好的获取 当前已登录的用户 方法 Syscont.getUser()获取即可,参考个人中心页面中用到的接口)
*/
// 查看信息
let showMsg = '<a href="javacript:void(0);" class="look" data-toggle="modal" data-target="#myModaltwo"><i class="fa fa-eye" aria-hidden="true"></i>查看信息</a>';
//橘色和灰色只显示一个颜色
// 橘色
let orange = '<a href="javacript:void(0);" class="orange" data-toggle="modal" data-target="#myModal">立即报名</a>';
// 灰色
let grey = ' <a href="javacript:void(0);" class="red" data-toggle="modal" data-target="#myModal" >取消报名</a>';
return showMsg + orange;
}
},
],
})
}
