1.前端代码
layui.use(['form', 'table','laypage'], function(){
var table = layui.table;
var form =layui.form;
var laypage = layui.laypage;
table.render({
elem: '#tb'
,url:'personManage/userManage'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, limit: 20
, limits: [20, 40, 60]
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,parseData:function (res) {
console.log(res)
console.log(res.total)
return{
"code":res.code,
"msg": res.msg,
"count": res.total,
data: res.data
}
},count:'count'
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: '序号', width:'6%', fixed: 'left', align:'center',templet: function(res){
return '<div style="text-align: center">'+ res.LAY_INDEX+'</div>';
}}
,{field:'userid', title:'用户名', width:'10%',align:'center', fixed: 'left', /*unresize: true,*/ sort: true,templet: function(res){
console.log("数据表格内res:-------------->"+res.userid)
if(res.userid==null){
return "";
}else {
return '<div style="text-align: center">'+res.userid+'</div>'
}
}}
,{field:'username', title:'姓名',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.username==null){
return "";
}else {
return '<div style="text-align: center">'+res.username+'</div>'
}
}}
,{field:'userpwd', title:'密码',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.userpwd==null){
return "";
}else {
return '<div style="text-align: center">'+res.userpwd+'</div>'
}
}}
,{field:'sex', title:'性别',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.sex==null){
return "";
}else {
return '<div style="text-align: center">'+res.sex+'</div>'
}
}}
,{field:'userdept', title:'所在部门',align:'center', width:'10%', templet: function(res){
if(res.userdept==null){
return "";
}else{
return '<div style="text-align: center">'+res.userdept+'</div>'
}
}}
,{field:'userrole', title:'所属角色',align:'center', width:'10%', templet: function(res){
if(res.userrole==null){
return "";
}else{
return '<div style="text-align: center">'+res.userrole+'</div>'
}
}}
,{field:'usertype', title:'用户类型',align:'center', width:'10%', sort: true,templet: function(res){
if(res.usertype==null){
return "";
}else if(res.usertype =='0'){
return '<div style="text-align: center">'+"普通用户"+'</div>'
}else if(res.usertype =='1'){
return '<div style="text-align: center">'+"系统管理员"+'</div>'
}else if(res.usertype =='2'){
return '<div style="text-align: center">'+"超级管理员"+'</div>'
}
}}
,{field:'userstatus', title:'用户状态',align:'center', width:'10%', sort: true,templet: function(res){
let menuId = res.userstatus;
let userid = res.userid;
if(res.userstatus==null){
return "";
}else if(res.userstatus =='1'){
return '<div style="text-align: center">' +" <input type='checkbox' menuId = '" + menuId +
"' userid = '" + userid + "' lay-filter='userstatus' lay-skin='switch' lay-text='启用|禁用' checked>"+'</div>'
}else if(res.userstatus =='0'){
return '<div style=\"text-align: center\">'+" <input type='checkbox' menuId = '" + menuId +
"' userid = '" + userid + "' lay-filter='userstatus' lay-skin='switch' lay-text='启用|禁用'>"+'</div>'
}
}}
,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:'10%',templet: function(res){
return '<div style="text-align: center">'+res.right+'</div>'
}}
]]
,id:'testReload'
,page: {
layout: ['prev', 'page', 'next','limit','count'] //自定义分页布局
,groups: 3 //只显示 3 个连续页码
,first: '首页' //首页
,prev: '上一页'
,next: '下一页'
,last: '尾页' //尾页
,limit:10
,limits:[10,20,30]
}
,request: {
pageName: 'page' // 页码的参数名称，默认：page
, limitName: 'size' //每页数据量的参数名，默认：limit
},
});
其实只需要关注这部分代码即可，前面部分为页面数据的获取
此处的lay-filter 的值为switch开关监听的值，menuId传入的则是当前数据状态的值，传入userid则是为了判断当前数据状态是属于那个用户
<%--监听启停用按钮--%>
<script>
layui.use(['form', 'jquery', 'layer'], function () {
var form = layui.form;
var jquery = layui.jquery;
var layer = layui.layer;
//监听开关事件
form.on('switch(userstatus)', function (data) {
var contexts;
var x = data.elem.checked;//判断开关状态
//拿到当前行的userstatus的值，menuId是在生成数据表格template时获取到的当前行的状态id
var status = data.elem.attributes['menuId'].nodeValue;
var userid = data.elem.attributes['userid'].nodeValue;
//定义当前状态位flag "0"为禁用，"1"为启用
var flag = '0';
if (x==true) {
//表明当前状态为禁用，在回调函数中对当前状态进行更新操作即可。
flag = '0';
contexts = "你确定要启用么";
} else {
//表明当前状态为启用，在回调函数中对当前状态进行更新操作即可。
flag = '1';
contexts = "你确定要禁用么";
}
layer.open({
content: contexts
, btn: ['确定', '取消']
, yes: function (index, layero) {
data.elem.checked = x;
debugger
$.ajax({
type:'POST',
url:'personManage/judgeSwitch',
data:{'userstatus':status,'userid':userid,'flag':flag},
dataType:'json',
success:function(data){
if(data!=null){
if(data.switch_res='1'){
if(data.message ='1'){
if(flag='0'){
flag='1'
}else {
flag='0';
}
layer.msg("启用成功！");
}else{
if(flag='0'){
flag='1'
}else {
flag='0';
}
layer.msg("停用成功！");
}
}
}
},
error:function(res){
console.log("err_data:------->"+res)
layer.msg("网络错误");
}
});
form.render();
layer.close(index);
//按钮【按钮一】的回调
}
, btn2: function (index, layero) {
//按钮【按钮二】的回调
data.elem.checked = !x;
form.render();
layer.close(index);
//return false 开启该代码可禁止点击该按钮关闭
}
, cancel: function () {
//右上角关闭回调
data.elem.checked = !x;
form.render();
//return false 开启该代码可禁止点击该按钮关闭
}
});
return false;
});
});
</script>
2.后端逻辑
controller
/**
* 开关监听按钮点击更改数据库状态事件
*/
@RequestMapping(value = "/judgeSwitch",method= RequestMethod.POST)
@ResponseBody
public Map<String,String> judgeSwitch(String userstatus,String userid,String flag,HttpSession session) {
//判断开关状态，根据开关启停用更改数据状态userstatus值
if(flag.equals("1")){
userstatus="0";
}else if(flag.equals("0")){
userstatus="1";
}
boolean bl= loginService.judgeSwitch(userid,userstatus,flag);
Map<String,String> map =new HashMap<>();
if(bl){
map.put("switch_res","1");
if(flag.equals('1')){
map.put("message","0");
}else {
map.put("message","1");
}
}else {
map.put("switch_res","0");
}
return map;
}
dao：
// 根据启停用按钮状态更改数据库fs_admin userstatus的值 flag:标识当前启停用状态根据此字段判断是停用还是启用
boolean judgeSwitch(@Param("userid")String userid,@Param("userstatus")String userstatus,
@Param("flag") String flag);
service：
// 根据启停用按钮状态更改数据库fs_admin userstatus的值 flag:标识当前启停用状态根据此字段判断是停用还是启用
public boolean judgeSwitch(String userid, String userstatus, String flag);
@Override
public boolean judgeSwitch(String userid, String userstatus, String flag) {
return loginDao.judgeSwitch(userid,userstatus,flag);
}
然后在页面上点击启停用按钮后，可以对应改变数据库的值，一个简单的启停用按钮就做完了。
欢迎各位大佬指正建议,觉得文章可以的话不妨点点关注哦！
386
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
