layui删除按钮实现删除表单数据

最新推荐文章于 2024-04-29 16:07:47 发布

茶凡_Matrix

最新推荐文章于 2024-04-29 16:07:47 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/weixin_45833112/article/details/125034757

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

好文章需要耐心阅读…茶凡—Matrix

请添加图片描述

注意

本文中采用的是 thymeleaf + springboot + java + layui 来创建的项目，如果单纯写html可能会有一些区别。

1、删除按钮事件

选中要删除的行，点击按钮删除数据。

🥙根据表格的tableId 获取表格状态对象。

🥙再根据表格状态对象获取到一条数据的主键字段，提交这个字段给后台删除数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
</head>

<body class="layui-layout-body">

<!--头-->
<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>
<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">
    <table class="layui-hide" id="test" lay-filter='test'></table>
    <div id="layerDemo">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit lay-filter="delete">
            <i class="layui-icon layui-icon-reduce-circle" style="font-size: 10px; color: white;"></i>删除
        </button>
    </div>
</div>
    
<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
<script>
    layui.use(['table', 'layer','laypage','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#test',
            id: 'tableId',
            url: 'parent/getParentList',
            method:'get',
            title: '用户信息表',
            totalRow: true,
            height: 520,
            width:550,
            cols: [
                [
                {type: "numbers", fixed: 'aa'}
                ,{type: "checkbox", fixed: 'aa'}
                , {field: 'studentName', title: '学生姓名', width: 100}
                , {field: 'personNo', title: '学号', sort:true ,width: 120}
                , {field: 'departmentId', title: '班级', width: 80 }
                , {field: 'parentDeptId', title: '年级', width: 80}

            ]
            ],
            page: true , // 分页
            elem: '#test',
            limit:10,
            parseData: function (res) {
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
            }

        });

        // 删除用户
        form.on('submit(delete)',function(data){
            var checkStatus = table.checkStatus('tableId'); //idTest 即为基础参数 id 对应的值
            console.log(checkStatus.data[0].personNo) //获取选中行的数据
            console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll ) //表格是否全选

            $.ajax({
                url:'/parent/deleteParent',
                type:'POST',
                data:{
                    "id": checkStatus.data[0].personNo
                },
                success:function(data){
                    if(data.code==1){
                        layer.msg("删除成功",function() {time:1000});
                        parent.location.reload();
                    }else{
                        layer.msg("删除失败",function() {time:1000})
                    }
                }
            })
        })

    });
</script>
</body>
</html>