记录一次layui的启停用监听事件

最新推荐文章于 2024-05-14 09:38:54 发布

原创

最新推荐文章于 2024-05-14 09:38:54 发布 · 469 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #监听

这篇博客主要记录了如何使用layui实现启停用功能的监听事件。通过设置lay-filter值并传递相关状态和用户ID，当点击按钮时，触发后端controller、dao和服务层逻辑，更新数据库中相应状态，完成启停用操作。欢迎大家提出建议和反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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