宿舍管理员
- 宿舍管理（宿舍增删改查）
宿舍管理主页
后端代码
@RequiresPermissions("dormitory:view")//权限管理;
@RequestMapping("main")
public String main(){
return "main/dormitoryMain";
}
@ResponseBody
@RequiresPermissions("dormitory:list")//权限管理;
@RequestMapping("getDormitoryList")
public Map getDormitoryList(@RequestBody MySearch<Dormitory> myPage){
Wrapper<Dormitory> wrapper=new EntityWrapper();
if(myPage.getDormitoryCode()!=null&& myPage.getDormitoryCode().length()>0){
wrapper.like("code",myPage.getDormitoryCode());
}
dormitoryServiceImpl.selectPage(myPage,wrapper);
Map<String, Object> map = new HashMap<>();
map.put("rows", myPage.getRecords());
map.put("total", myPage.getTotal());
return map;
}前端HTML 和JS
<div class="row" style="margin-right: 50px;">
<div class="panel panel-default">
<div class="panel-body">
<table id="table" data-toggle="table" >
</table>
</div>
</div>
</div>
$('#table').bootstrapTable({
columns: [
{
checkbox : true //列表中显示复选框
}, {
field: 'id',
title: 'Item ID'
},{
field: 'code',
title: '宿舍编号'
}, {
field: 'building',
title: '宿舍楼宇'
}, {
field: 'floor',
title: '宿舍楼层'
}, {
field: 'doorplate',
title: '宿舍门牌'
}, {
field: 'total',
title: '容纳人数'
}, ],
toolbar: '#toolbar',//指定工具栏
toolbarAlign:'right',//工具栏对齐方式
buttonsAlign:'right',//按钮对齐方式
method:"post",
url:"/dormitory/getDormitoryList",
showHeader:true,
pagination:true,
sidePagination: "server",
pageNumber:1,
pageSize: 10,
idField:'id',
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
////查询参数,每次调用是会带上这个参数，可自定义
queryParams : function(params) {
var dormitoryCode = $('#dormitoryCode').val();
return {
current: params.offset/params.limit+1,
size: params.limit,
dormitoryCode:dormitoryCode
};
},宿舍新增和编辑
后台代码
@ResponseBody
@RequiresPermissions("dormitory:save")//权限管理;
@RequestMapping("saveDormitory")
public Map saveDormitory(Dormitory dormitory){
boolean b = dormitoryServiceImpl.insertOrUpdateAllColumn(dormitory);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}
前端HTML和JS
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">保存记录</h4>
</div>
<div class="modal-body">
<form id="myForm">
<input id="id" type="text" style="display:none;" name="id">
<div class="form-group">
<label for="code" class="control-label">宿舍编号:</label>
<input type="text" class="form-control" id="code" name="code">
</div>
<div class="form-group">
<label for="building" class="control-label">宿舍楼宇:</label>
<input type="text" class="form-control" id="building" name="building">
</div>
<div class="form-group">
<label for="floor" class="control-label">宿舍楼层:</label>
<input type="text" class="form-control" id="floor" name="floor">
</div>
<div class="form-group">
<label for="doorplate" class="control-label">宿舍门牌:</label>
<input type="text" class="form-control" id="doorplate" name="doorplate">
</div>
<div class="form-group">
<label for="total" class="control-label">宿舍容纳人数:</label>
<input type="number" class="form-control" id="total" name="total">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="saveDormitory()">保存</button>
</div>
</div>
</div>
</div>
function addModal(){
$('#myModalLabel').text('新增宿舍');
$("#myForm")[0].reset();
$('#myModal').modal({
keyboard: false,
})
}
function openEditModal(){
var rows= $('#table').bootstrapTable('getSelections');
if (rows.length != 1) {
Modal.alert({
title:'提示',
btnok: '确定',
msg : "请选择一条要修改的数据"
});
return;
}else {
$("#myForm")[0].reset();
$('#myModalLabel').text('修改宿舍资料');
$("#id").val(rows[0].id);
$("#building").val(rows[0].building);
$("#floor").val(rows[0].floor);
$("#doorplate").val(rows[0].doorplate);
$("#total").val(rows[0].total);
$("#code").val(rows[0].code);
$('#myModal').modal('show');
}
}
function saveDormitory() {
var flag = checkForm();
if (!flag)return;
var targetUrl='/dormitory/saveDormitory';
var data = $("#myForm").serialize();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:data,
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"保存成功"
});
}else{
Modal.alert({
msg:"保存失败"
});
}
$('#myModal').modal('hide');
$('#table').bootstrapTable('refresh');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
删除宿舍
后端代码
@RequiresPermissions("dormitory:del")//权限管理;
@ResponseBody
@RequestMapping("delDormitory")
public Map delDormitory(@RequestParam("ids[]")List<Integer> ids){
// List<Integer> list = Arrays.asList(ids);
boolean b = dormitoryServiceImpl.deleteBatchIds(ids);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}
html和JS
function del() {
var targetUrl='/dormitory/delDormitory';
var rows= $('#table').bootstrapTable('getSelections');
if (rows.length ==0) {
Modal.alert({
title:'提示',
btnok: '确定',
msg : "请选择数据"
});
return;
}else{
var ids=[];
rows.map(function (value,index){
ids.push(value.id);
});
console.log(ids);
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:{ids:ids},
// contentType: "application/json;charset=UTF-8",
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"删除成功"
});
}else{
Modal.alert({
msg:"删除失败"
});
}
$('#table').bootstrapTable('refresh');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
}电费管理（电费的录入和收缴情况）
电费管理主页 根据学生维度
后端代码
@RequestMapping("main")
@RequiresPermissions("student:main")
public String main(){
return "main/studentMain";
}
@ResponseBody
@RequestMapping("selectStudentWithDormitory")
@RequiresPermissions("student:list")
public Map selectStudentWithDormitory(@RequestBody MySearch<Dormitory> myPage){
List<Map> list = iStudentService.selectStudentWithDormitory(myPage);
Map<String, Object> map = new HashMap<>();
map.put("rows", list);
map.put("total", myPage.getTotal());
return map;
}HTML和JS代码
<div class="row" style="margin-right: 50px;">
<div class="panel panel-default">
<div class="panel-body">
<table id="table" data-toggle="table" >
</table>
</div>
</div>
</div>
$('#table').bootstrapTable({
columns: [
{
checkbox : true //列表中显示复选框
}, {
field: 'id',
title: 'Item ID'
},{
field: 'NAME',
title: '学生姓名'
},{
field: 'user_name',
title: '系统账号'
},{
field: 'student_num',
title: '学号'
},{
field: 'student_class',
title: '班级'
},{
field: 'student_sex',
title: '性别'
},{
field: 'CODE',
title: '宿舍编号'
}, {
field: 'building',
title: '宿舍楼宇'
}, {
field: 'floor',
title: '宿舍楼层'
}, {
field: 'doorplate',
title: '宿舍门牌'
}, {
field: '',
title: '编辑',
formatter:function(value, row, index){
// if(row.type==3){
return "<button class=\"btn btn-primary\" id=\"search_btn\" onclick='addModal("+row.user_id+")'>新增用电量</button>" +
"<button class=\"btn btn-primary\" id=\"search_btn\" onclick='openModal("+row.user_id+")'>查看用电量</button>"
// }
}
} ],
// toolbar: '#toolbar',//指定工具栏
toolbarAlign:'right',//工具栏对齐方式
buttonsAlign:'right',//按钮对齐方式
method:"post",
url:"/student/selectStudentWithDormitory",
showHeader:true,
pagination:true,
sidePagination: "server",
pageNumber:1,
pageSize: 10,
idField:'id',
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
////查询参数,每次调用是会带上这个参数，可自定义
queryParams : function(params) {
var dormitoryCode = $('#dormitoryCode').val();
return {
current: params.offset/params.limit+1,
size: params.limit,
dormitoryCode:dormitoryCode
};
},
});新增电费
后端代码
@ResponseBody
@RequestMapping("save")
public Map sava( Cost cost){
boolean b = iCostService.insertOrUpdate(cost);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}HTML和JS代码
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">保存记录</h4>
</div>
<div class="modal-body">
<form id="myForm">
<div class="form-group">
<!--<label for="user_id" class="control-label">宿舍编号:</label>-->
<input type="text" class="form-control" style="display: none" id="user_id" name="user_id">
<input type="text" class="form-control" style="display: none" id="status" name="status" value="未缴纳">
</div>
<div class="form-group">
<label for="electri" class="control-label">用电量（W）:</label>
<input type="text" class="form-control" id="electri" name="electri">
</div>
<div class="form-group">
<label for="cost" class="control-label">电费(元):</label>
<input type="text" class="form-control" id="cost" name="cost">
</div>
<div class="form-group">
<label for="logDate" class="control-label">计费时间:</label>
<input type="text" class="form-control" id="logDate" name="logDate">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="save()">保存</button>
</div>
</div>
</div>
</div>
function save() {
var flag = checkForm();
if (!flag)return;
var targetUrl='/cost/save';
var data = $("#myForm").serialize();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:data,
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"保存成功"
});
}else{
Modal.alert({
msg:"保存失败"
});
}
$('#myModal').modal('hide');
$('#table').bootstrapTable('refresh');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
查看缴纳情况
后端代码
@ResponseBody
@RequestMapping("getListByUserId")
public List getListByUserId( String user_id){
Map<String, Object> map = new HashMap<>();
map.put("user_id", user_id);
List<Cost> costs = iCostService.selectByMap(map);
return costs;
}
前端HTML和JS代码
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >用电量</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>计费时间</th>
<th>用电量（W）</th>
<th>电费(元)</th>
<th>缴纳状态</th>
</tr>
</thead>
<tbody id="costList">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
JS
function openModal(userId){
console.log(userId);
var targetUrl='/cost/getListByUserId';
$("#costList").empty();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:{"user_id":userId},
dataType:'json',
success:function(data){
console.log(data);
for(var i=0;i<data.length;i++){
var tr = "<tr>"+
"<td>"+(i+1)+"</td>"+
"<td>"+data[i].logDate+"</td>"+
"<td>"+data[i].electri+"</td>"+
"<td>"+data[i].cost+"</td>"+
"<td>"+data[i].status+"</td>"+
"</tr>";
$("#costList").append(tr);
}
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
$('#modal').modal('show');
// }
}- 人员管理（教师 学生 宿管的 增删改查）
人员管理主页
后端代码
@RequestMapping("userMain")
@RequiresPermissions("user:main")
public String main() {
return "main/userMain";
}
/**
* 用户查询.
* @return
*/
@ResponseBody
@RequestMapping("/userList")
@RequiresPermissions("user:list")
public Map userList(@RequestBody MySearch<UserInfo> myPage){
Wrapper<UserInfo> wrapper=new EntityWrapper();
if(myPage.getSearchCode()!=null&& myPage.getSearchCode().length()>0){
wrapper.like("user_name",myPage.getSearchCode());
}
if(myPage.getSearchName()!=null&& myPage.getSearchName().length()>0){
wrapper.like("name",myPage.getSearchName());
}
if(myPage.getSearchType()!=null&& myPage.getSearchType().length()>0){
wrapper.eq("type",myPage.getSearchType());
}
iUserInfoService.selectPage(myPage,wrapper);
Map<String, Object> map = new HashMap<>();
map.put("rows", myPage.getRecords());
map.put("total", myPage.getTotal());
return map;
}前端HTML和JS
<div class="row" style="margin-right: 50px;">
<div class="panel panel-default">
<div class="panel-body">
<table id="table" data-toggle="table" >
</table>
</div>
</div>
</div>
$('#table').bootstrapTable({
columns: [
{
checkbox : true //列表中显示复选框
}, {
field: 'id',
title: 'ID'
},{
field: 'name',
title: '名字'
}, {
field: 'userName',
title: '账号'
}, {
field: 'type',
title: '类型',
formatter:function(value){
return $("#type option[value='"+value+"']").text();
}
}, {
field: '',
title: '编辑',
formatter:function(value, row, index){
if(row.type==3){
return "<button class=\"btn btn-primary\" id=\"search_btn\" onclick='openStudentModal("+row.id+")'>编辑学生资料</button>"
}
}
} ],
toolbar: '#toolbar',//指定工具栏
toolbarAlign:'right',//工具栏对齐方式
buttonsAlign:'right',//按钮对齐方式
method:"post",
url:"/userInfo/userList",
showHeader:true,
pagination:true,
sidePagination: "server",
pageNumber:1,
pageSize: 10,
idField:'id',
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
////查询参数,每次调用是会带上这个参数，可自定义
queryParams : function(params) {
var searchCode = $('#searchCode').val();
var searchName = $('#searchName').val();
var searchType = $('#searchType').val();
return {
current: params.offset/params.limit+1,
size: params.limit,
searchCode:searchCode,
searchName:searchName,
searchType:searchType
};
},
});新增或修改用户
后端代码
/**
* 用户添加;
* @return
*/
@RequestMapping("/userSave")
@RequiresPermissions("userInfo:save")//权限管理;
@ResponseBody
public Map userInfoAdd(UserInfo userInfo){
Wrapper<UserInfo> wrapper=new EntityWrapper();
wrapper.eq("user_name",userInfo.getUserName());
if(userInfo.getId()==null){
int i = iUserInfoService.selectCount(wrapper);
if(i>0){
Map<String, Object> map = new HashMap<>();
map.put("success", Boolean.FALSE);
map.put("msg", "存在该账号!");
return map;
}
}
try {
String s = MyUtils.getMd5Syr(userInfo.getPassword());
userInfo.setPassword(s);
} catch (Exception e) {
e.printStackTrace();
}
boolean b = iUserInfoService.insertOrUpdate(userInfo);
if(userInfo.getId()!=null){
Map<String,Object> map = new HashMap();
map.put("uid",userInfo.getId());
iSysRoleUserService.deleteByMap(map);
}
Long id = null;
if(userInfo.getId()==null){
Integer o = (Integer) iUserInfoService.selectObj(wrapper);
id=(long)o;
}else{
id=userInfo.getId();
}
SysRoleUser sysRoleUser=new SysRoleUser();
sysRoleUser.setRoleId((long)userInfo.getType());
sysRoleUser.setUid(id);
iSysRoleUserService.insert(sysRoleUser);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}
前端HTML和JS
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">修改记录</h4>
</div>
<div class="modal-body">
<form id="myForm">
<input id="id" type="text" style="display:none;" name="id" >
<div class="form-group">
<label for="userName" class="control-label">账号</label>
<input type="text" class="form-control" id="userName" name="userName">
</div>
<div class="form-group">
<label for="password" class="control-label">密码</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="form-group">
<label for="password" class="control-label">确认密码</label>
<input type="password" class="form-control" id="password1">
</div>
<div class="form-group">
<label for="name" class="control-label">名字</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label>类型</label>
<select class="form-control" id="type" name="type" >
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="save()">保存</button>
</div>
</div>
</div>
</div>JS
function addModal(){
$('#myModalLabel').text('新增人员');
document.getElementById("myForm").reset();
$("#userName").attr("readonly",false);
$('#myModal').modal({
keyboard: false
})
}
function openEditModal(){
var rows= $('#table').bootstrapTable('getSelections');
if (rows.length != 1) {
Modal.alert({
title:'提示',
btnok: '确定',
msg : "请选择一条要修改的数据"
});
return;
}else {
$('#myModalLabel').text('修改人员');
document.getElementById("myForm").reset();
console.log(rows);
$("#id").val(rows[0].id);
$("#name").val(rows[0].name);
$("#userName").val(rows[0].userName);
$("#password").val(rows[0].password);
$("#password1").val(rows[0].password);
$("#userName").attr("readonly",true);
$("#type").val(rows[0].type);
$("#doorplate").val(rows[0].doorplate);
$('#myModal').modal('show');
}
}
function save() {
var flag = checkForm();
if (!flag)return;
var targetUrl='/userInfo/userSave';
var data = $("#myForm").serialize();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:data,
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"保存成功"
});
}else{
Modal.alert({
msg:data.msg==null?"保存失败":data.msg
});
}
$('#myModal').modal('hide');
$('#table').bootstrapTable('refresh');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
删除用户
后端代码
/**
* 用户删除;
* @return
*/
@RequestMapping("/userDel")
@RequiresPermissions("userInfo:del")//权限管理;
@ResponseBody
public Map userDel(@RequestParam("ids[]")List<Integer> ids){
boolean b = iUserInfoService.deleteBatchIds(ids);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}前端HTML和JS
function del() {
var targetUrl='/userInfo/userDel';
var rows= $('#table').bootstrapTable('getSelections');
if (rows.length ==0) {
Modal.alert({
title:'提示',
btnok: '确定',
msg : "请选择数据"
});
return;
}else{
var ids=[];
rows.map(function (value,index){
ids.push(value.id);
});
console.log(ids);
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:{ids:ids},
// contentType: "application/json;charset=UTF-8",
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"删除成功"
});
}else{
Modal.alert({
msg:"删除失败"
});
}
$('#table').bootstrapTable('refresh');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
}
修改学生资料
后端代码
@ResponseBody
@RequestMapping("save")
@RequiresPermissions("student:save")
public Map saveStudent( Student student){
boolean b = iStudentService.insertOrUpdate(student);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}
前端HTML和JS
<div class="modal fade" id="studentModal" tabindex="-2" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="studentModalLabel">保存学生资料</h4>
</div>
<div class="modal-body">
<form id="studentForm">
<input id="userId" type="text" style="display:none;" name="userId">
<input id="studentId" type="hidden" name="id">
<div class="form-group">
<label for="studentNum" class="control-label">学生学号</label>
<input type="text" class="form-control" id="studentNum" name="studentNum">
</div>
<div class="form-group">
<label for="studentClass" class="control-label">学生班级</label>
<input type="text" class="form-control" id="studentClass" name="studentClass">
</div>
<div class="form-group">
<label for="studentSex" class="control-label">性别</label>
<select class="form-control" id="studentSex" name="studentSex" >
<option>男</option>
<option>女</option>
</select>
<div class="form-group">
<label for="dormitoryId" class="control-label">宿舍编号</label>
<select class="form-control" id="dormitoryId" name="dormitoryId" >
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
</div>
</div>
</div>
</div>
function openStudentModal(id){
var targetUrl='/student/getStudent';
document.getElementById("studentForm").reset();
$("#userId").val(id);
$.ajax({
type:'get',
url:targetUrl,
cache: false,
data:{"userId":id},
dataType:'json',
contentType: 'application/json;charset=utf-8',
success:function(data){
if(data!=null){
console.log(data);
$("#studentId").val(data.id);
$("#studentNum").val(data.studentNum);
$("#studentClass").val(data.studentClass);
$("#studentSex").val(data.studentSex);
$("#dormitoryId").val(data.dormitoryId);
}
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
$("#studentModal").modal('show');
}
function saveStudent() {
var targetUrl='/student/save';
var data = $("#studentForm").serialize();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:data,
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"保存成功"
});
}else{
Modal.alert({
msg:"保存失败"
});
}
// $('#myModal').modal('hide');
// $('#table').bootstrapTable('refresh');
$("#studentModal").modal('hide');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
学生查看电费 确认扣费页面
后端代码
@RequestMapping("main")
public String main(){
return "main/costMain";
}
@ResponseBody
@RequestMapping("getCostList")
public Map getCostList(@RequestBody MySearch myPage){
Wrapper<Cost> wrapper=new EntityWrapper();
Subject currentUser = SecurityUtils.getSubject();
UserInfo user = (UserInfo)currentUser.getPrincipal();
wrapper.eq("user_id",user.getId());
iCostService.selectMapsPage(myPage, wrapper);
Map<String, Object> map = new HashMap<>();
map.put("rows", myPage.getRecords());
map.put("total", myPage.getTotal());
return map;
}前端HTML和JS
<div class="row" style="margin-right: 50px;">
<div class="panel panel-default">
<div class="panel-body">
<table id="table" data-toggle="table" >
</table>
</div>
</div>
</div>
$('#table').bootstrapTable({
columns: [
{
checkbox : true //列表中显示复选框
}, {
field: 'id',
title: 'Item ID'
},{
field: 'logDate',
title: '用电时间'
},{
field: 'electri',
title: '用电量（W）'
},{
field: 'cost',
title: '电费（元）'
},{
field: 'status',
title: '缴纳状态'
}, {
field: '',
title: '操作',
formatter:function(value, row, index){
if(row.status=='未缴纳'){
return "<button class=\"btn btn-primary\" id=\"search_btn\" onclick='addModal("+row.id+")'>确认扣费</button>"
}
}
} ],
// toolbar: '#toolbar',//指定工具栏
toolbarAlign:'right',//工具栏对齐方式
buttonsAlign:'right',//按钮对齐方式
method:"post",
url:"/cost/getCostList",
showHeader:true,
pagination:true,
sidePagination: "server",
pageNumber:1,
pageSize: 10,
idField:'id',
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
////查询参数,每次调用是会带上这个参数，可自定义
queryParams : function(params) {
return {
current: params.offset/params.limit+1,
size: params.limit
};
},
确认扣费
后端代码
@ResponseBody
@RequestMapping("updStatus")
public Map updStatus(Integer id){
Cost cost = new Cost();
cost.setId(id);
cost.setStatus("已缴纳");
boolean b = iCostService.updateById(cost);
Map<String, Object> map = new HashMap<>();
map.put("success", b);
return map;
}前端代码HTML JS
function addModal(id){
var targetUrl='/cost/updStatus';
Modal.confirm({
"msg":"确认缴费？"
}).on( function (e) {
if(e){
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:{"id":id},
dataType:'json',
success:function(data){
if(data!=null&&data.success==true){
Modal.alert({
msg:"缴费成功"
});
}else{
Modal.alert({
msg:"缴费失败"
});
}
$('#table').bootstrapTable('refresh');
},
error:function(){
Modal.alert({
msg:"请求失败"
});
}
});
}
});
}
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
