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;
}
},
],
})
}