这里以用户管理为例,实现layui增删改查

表格结构

首先我们需要有一个表格,然后为表格增加操作按钮,分别表格顶部的工具条,以及每行数据右边的操作按钮(编辑以及删除),我们在顶部操作条添加一个新增用户的按钮。

<div class="layui-card">
                        
                        <table class="layui-hide" id="userlist" lay-filter="userlist"></table>

</div>

<script type="text/html" id="toolbarUserList">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="addNewUser">新增用户</button>
                        </div>

</script>

                    <script type="text/html" id="barUser">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>

接着,我们初始化表格,首先要把数据装载进去,分别指定顶栏工具条以及每行数据的工具条id

// 初始化表格
            let userTable = table.render({
                elem: '#userlist'
                , url: '/user/list/page'
                , toolbar: '#toolbarUserList'  // 这里设置顶部工具按钮条,写上html区块的id
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'id', title: 'ID', sort: true, width: 100 }
                    , { field: 'username', width: 200, title: '用户名' }
                    // ,{field:'pwd', title: '密码'}
                    , { field: 'userjd', title: '权限' }
                    , { fixed: 'right', title: '操作', toolbar: '#barUser', width: 150 } // 这里指定每行数据的操作按钮区域
                ]]
                , page: true
            });

设置顶部工具条的点击事件:

//头工具栏事件
table.on('toolbar(userlist)', function (obj) {
    var checkStatus = table.checkStatus(obj.config.id);
    switch (obj.event) {
        case 'addNewUser':
            addAUser();  //点击按钮执行addUser方法
            break;
    }
});

新增用户

创建一个新增用户表单,我们设置它为默认不显示,只有在点击按钮之后才显示

<form id="useradd" class="layui-form" method="post" style="display: none;padding: 20px"
    autocomplete="off">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" id="username" name="username" lay-verify="title"
                autocomplete="off" placeholder="请输入用户名" class="layui-input">
        </div>

</div>

<div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" id="pwd" name="pwd" lay-verify="title"
                autocomplete="new-password" placeholder="请输入密码" class="layui-input">
        </div>

</div>

<div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-block">
            <input type="radio" name="userjd" value="1" title="管理员">
            <input type="radio" name="userjd" value="2" title="维修人员">
            <input type="radio" name="userjd" value="3" title="普通用户" checked="">
        </div>

</div>

<div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit=""
                lay-filter="subtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

</div>

</form>

为addUser方法指定一个表单,使用layer弹出新增用户表单

// 新增用户窗口
function addAUser() {
    layer.open({
        type: 1,
        title: '新增用户'
        , content: $("#useradd"),
        shade: 0
    });
}

监听提交按钮的事件,传入的data包涵了表单里面各个fileld的值,我们定于一个变量把文本框里面的值取出来,然后使用ajax提交,其中data中左边是要提交给后端的url传入字段名称,右边是变量提交之后后端返回resp状态码,为1的话就是新增成功。

提交的url为:http://xxx.kaygb.com/user/addnew?username=xxx&pwd=xxx&userjd=xxx 由于使用的是post方式,所以并不会在地址栏显示出详细的内容。

//监听提交新增用户
form.on('submit(subtn)', function (data) {
    //获取文本框的值
    let username = data.field.username;
    let pwd = data.field.pwd;
    let userjd = data.field.userjd;

    $.ajax({
        type: 'post',
        url: '/user/addnew',
        async: true,
        datype: "json",
        data: {
            username: username,
            pwd: pwd,
            userjd: userjd
        },
        success: function (resp) {
            console.log(resp);
            switch (resp){
                case 0: break;
                case 1: layer.msg("新增成功", { icon: 6 });
                    setTimeout(function () {
                        layer.closeAll();
                        userTable.reload();
                    }, 1500);
                    break;
                case 2: layer.msg("用户名已存在,请重新输入", { icon: 5 });break;
                case 3: layer.msg("无权限,新增失败", { icon: 5 });break;
                case 4: layer.msg("密码不符合格式:6-12位且包含大小写字母以及数字", { icon: 5 });break;
                default:layer.msg("新增失败", { icon: 5 });
            }
        },
        error: function () {
            layer.alert('请求失败,系统错误', { icon: 7, title: '提示', time: 1000 })
        }

    });
    return false;
});

然后在后端获取到提交的值,这里我使用了session来判断用户是否登录以及用户的权限,对于传入的用户名及密码,我自定义了一个加密方式,将密码加密后存入数据库。

哦对了,要先将bean注入到ioc容器中去

private UserRepository userRepository;
    @Autowired
    private void setUserRepository(UserRepository userRepository){
        this.userRepository = userRepository;
    }
    private UserService userService;
    @Autowired
    private void setUserService(UserService userService){
        this.userService = userService;
    }

然后对传入的值进行处理

@PostMapping("/user/addnew")  // 新增用户
    public Integer insertUser(@RequestParam(value = "username", required = false) String username, @RequestParam(value = "pwd", required = false) String pwd, @RequestParam(value = "userjd", required = false) Integer userjd,HttpSession session) {
            User sessionUser = (User) session.getAttribute("LoginUser");
            SecMd5 secMd5 = new SecMd5();
            if (!isLD.isLetterDigit(pwd)){
                return 4; //密码不符合格式
            }else
            if (username.equals("") || pwd.equals("")){
                return 0;
            } else if (sessionUser.getUserjd() == 1){
                User user = secMd5.encryUser(username,pwd,userjd);
                System.out.println(user);
                if (userRepository.existsByUsernameLike(username)) {
                    return 2; // 用户名已存在
                } else {
                    User user1 = userRepository.save(user);
                    int id = user1.getId();
                    return userRepository.existsById(id) ? 1 : 0;// 存在返回1,不存在返回0
                }
            }else{
                return 3;
            }


        }

编辑用户

首先需要获取到单行操作按钮的的点击事件,并传入当前行的数据

//工具条事件,单行数据操作
table.on('tool(userlist)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)

    switch (layEvent) {
        case 'detail':
            break;
        case 'del':
            layer.confirm('真的删除行么', function (index) {
                if (data.length === 0) {
                    layer.msg('请选择一行');
                } else {
                    // console.log("data[0].id为", data.id);
                    deleteuser(data.id);
                }
            });
            break;
        case 'edit':

            $("#edituserid").val(data.id);
            $('#testspan').val('asd');
            $("#editusername").val(data.username);

            layer.open({
                title: '修改用户',
                type: 1,
                content: $("#useredit"),
                shade: 0
            });

            break;

    }
});

点击编辑后执行edituser函数

// 修改用户信息
function edituser(id) {
    let url = "user/edit/" + id;
    let new_username = null;
    let new_password = null;
    let new_jd = null;
    console.log("url为:", url);
    $.ajax({
        type: "post",
        url: url,
        contentType: 'application/json',
        datatype: "json",
        success: function (data) {
            if (data === 2) {
                layer.alert('禁止修改此用户', { icon: 7, title: '提示', time: 1000 })
            } else
                if (data === 1) {
                    layer.alert('修改失败', { icon: 7, title: '提示', time: 1000 })
                } else if (data === 0) {
                    layer.alert('修改成功', { icon: 6, title: '提示', time: 1500 })
                    setTimeout(function () {
                        userTable.reload();
                    }, 1500);
                }

        },
        error: function () {
            layer.alert('请求失败,系统错误', { icon: 7, title: '提示', time: 1000 })
        }
    })
    return false;
}

然后在后端进行处理

@PostMapping("/user/edit") // 通过id修改用户
public Integer editUser(@RequestParam("id") Integer id,@RequestParam("username") String username,@RequestParam(value = "pwd",required = false) String pwd,@RequestParam(value = "userjd",required = false) Integer userjd,HttpSession session){
    User sessionUser = (User)session.getAttribute("LoginUser");
    if (!isLD.isLetterDigit(pwd)){
        return 4; //密码不符合格式
    }else
    if (sessionUser.getId() == 1 && userjd != 1){
        return 2;
    }else
    if (sessionUser.getUserjd() == 1){
        User user = userRepository.findById(id).orElse(null);
        if (userjd == 1 || userjd == 2 || userjd == 3){
            if (userjd != user.getUserjd()){
                user.setUserjd(userjd);
            }
        }
        String md5pwd = SecMd5.encryPwd(pwd, "" + user.getRandnum());
        if (!pwd.equals("")&& pwd != null && !md5pwd.equals(user.getPwd())){
                user.setPwd(md5pwd);
        }
        userRepository.save(user);
        return 1;
    }else {
        return 3;
    }

}

删除用户

删除这里就比较简单了,获取当前行ID,然后post传入id值,后端通过id将此条记录删除,之后返回状态码,前台获取状态码后对表格进行重载即可

//删除用户
function deleteuser(id) {
    let url = "user/delete/" + id;
    console.log("url为:", url);
    $.ajax({
        type: "post",
        url: url,
        contentType: 'application/json',
        datatype: "json",
        success: function (data) {
            switch (data) {
                case 3:
                    layer.alert('无权限', { icon: 7, title: '提示', time: 1000 })
                    break;
                case 2:
                    layer.alert('禁止删除此用户', { icon: 7, title: '提示', time: 1000 })
                    break;
                case 1:
                    layer.alert('删除失败', { icon: 7, title: '提示', time: 1000 })
                    break;
                case 0:
                    layer.alert('删除成功', { icon: 6, title: '提示', time: 1500 })
                    setTimeout(function () {
                        userTable.reload(); // 表格重载
                    }, 1500);
                    break;
                default:
                    layer.alert('系统错误', { icon: 7, title: '提示', time: 1000 })
            }

        },
        error: function () {
            layer.alert('请求失败,系统错误', { icon: 7, title: '提示', time: 1000 })
        }
    })
    return false;
}

后端对传入的id进行处理,通过jpa自带的deleteById方法删除

@PostMapping("/user/delete/{id}") // 通过id删除用户
public Integer DeleteUser(@PathVariable("id") Integer id,HttpSession session) {
    User sessionUser = (User) session.getAttribute("LoginUser");
    Integer userjd = sessionUser.getUserjd();
    if (userjd == 1){
        if (id == 1 || id ==2){
            return 2; // 这里是禁止删除id为1和2的账号,防止误删超级管理账户
        }else {
            userRepository.deleteById(id);
            return userRepository.existsById(id) ? 1 : 0;  //  存在返回1,不存在返回0
        }
    }else{
        return 3;
    }

}

其余的操作也是类似如此。

微信公众号
最后修改:2021 年 06 月 10 日 10 : 19 PM
如果您觉得我的文章有帮助,请随意赞赏!