基于layui做一个最简单表格的增删改查页面

最新推荐文章于 2024-05-15 23:29:45 发布
最新推荐文章于 2024-05-15 23:29:45 发布
阅读量4.3k 收藏 37
点赞数 3
分类专栏： jQuery 文章标签： layui jQuery table 增删改查 表格UI组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43316300/article/details/97790624
版权
一、表格效果如下图所示⬇️

在这里插入图片描述
在这里插入图片描述

二、直接上代码⬇️
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
    <script src="../../../baseURL.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
.layui-form{
    background:#fff;
}
</style>
<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="sexDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<body>
    <div class="content-wrapper" style="position: relative;">
        <div class="layui-col-md12 we-search" style="position: absolute;">
            名称搜索：
            <div class="layui-inline">
                <input type="text" name="projectName" id="projectName" placeholder="名称关键字 ?" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-btn-group demoTable" style="position: absolute;;right:2.25rem;">
            <button class="layui-btn" data-type="isAll">增加</button>
        </div>
        <table class="layui-table" style="margin-top: 3rem;" lay-filter="demo" id="demo">
            <thead>
                <tr>

                </tr>
            </thead>
        </table>   
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit" style="color:#fff;">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="color:#fff;">删除</a>
    </script>
<div id="add-main" style="display: none;">
    <form class="layui-form" id="add-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">pid</label>
            <div class="layui-input-block">
                <input type="text" name="pid" required style="width: 240px" lay-verify="required" placeholder="请输入地区pid"
                    autocomplete="off" class="layui-input" onkeyup="value=Number(value.replace(/^[^\d]+/g,''))" onblur="value=Number(value.replace(/^[^\d]+/g,''))">
            </div>
        </div>
        <div class="layui-form-item center">
            <label class="layui-form-label" style="width: 100px">地区名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required value="" style="width: 240px" lay-verify="required"
                    placeholder="请输入地区名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn">重置</button>
            </div>
        </div>
    </form>
</div>
<div id="edit-main" style="display: none;">
    <form class="layui-form" id="add-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" required style="width: 240px" lay-verify="required" placeholder="请输入配置类型"
                    autocomplete="off" class="layui-input" id="sdk_id" disabled="">
            </div>
        </div>
        <div class="layui-form-item center">
            <label class="layui-form-label" style="width: 100px">地区名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required value="" style="width: 240px" lay-verify="required"
                    placeholder="请输入地区名称" autocomplete="off" class="layui-input" id="sdk_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">地区pid</label>
            <div class="layui-input-block">
                <input type="text" name="pid" required style="width: 240px" lay-verify="required" placeholder="请输入地区pid"
                    autocomplete="off" class="layui-input" id="pid">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save2">立即提交</button>
            </div>
        </div>
    </form>
</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../../../layui/layui.js" charset="utf-8"></script>
    <script>
        function urlArr() {
            var aQuery = window.location.href.split("?"); //取得Get参数
            var aGET = new Array();
            if (aQuery.length > 1) {
                var aBuf = aQuery[1].split("&");
                for (var i = 0, iLoop = aBuf.length; i < iLoop; i++) {
                    var aTmp = aBuf[i].split("="); //分离key与Value
                    aGET[aTmp[0]] = aTmp[1];
                }
            }
            return aGET;
        }
        var search=decodeURI(urlArr().projectName)
        if(search=="undefined"){
            search=""
        }
        $("#projectName").val(search); //这个就是状态的值 新建 / 编辑
        var Interface='//';//接口
        layui.use('table', function () {
            var table = layui.table,
            form = layui.form;
            //第一个实例
            table.render({
                elem: '#demo',
                height: 475,
                toolbar:true,
                url: baseUrl2+Interface, //数据接口
                page: true, //开启分页
                // even: true, //隔行背景
                id:'table',
                ,request:{
			  		pageName: 'page_num',
			  		limitName: 'per_page'
			  	},
                cols: [[ //表头
                    {field: 'id', title: 'ID',  sort: true, fixed: 'left', width:100},
                    {field: 'pid', title: 'pid', sort: true, width:100},
                    {field: 'name', title: '地区名称'},
                    {field: 'updated_time', title: '更新时间', width:200, sort: true},
                    {field: 'created_time', title: '创建时间', width:200},
                    {field: 'status', title:'是否显示', width:140, templet: '#switchTpl', unresize: true},
                    {fixed: 'right',title: '操作', width:138, align:'center', toolbar: '#barDemo'}
                ]]
            });
            //监听开关
            form.on('switch(sexDemo)', function(obj){
                var status
                if(obj.elem.checked){
                    status=1
                }else{
                    status=0
                }
                $.ajax({
                    type:"put",
                    url:baseUrl2+Interface,
                    xhrFields: {
                        withCredentials: true
                    },
                    data:JSON.stringify({
                        id:this.value,
                        status:status
                    }),
                    success:function (res) {
                        if(res.code!==0){
                            if(status===1){
                                obj.elem.checked=false;
                            }else{
                                obj.elem.checked=true;
                            }
                            form.render('checkbox');//菜单渲染 把内容加载进去
                        }
                    }
                })
            });
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的要删除么', function (index) {
                        $.ajax({
                            type:"delete",
                            url:baseUrl2+Interface,
                            xhrFields: {
                                withCredentials: true
                            },
                            data: JSON.stringify({
                                id:data.id
                            }),
                            success:function(res){
                                if(res.code!=0){
                                    alert(res.msg)
                                }else{
                                    alert(res.msg)
                                    obj.del();
                                    layer.close(index);
                                }
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    // layer.alert('编辑行：<br>' + JSON.stringify(data))
                    $("#sdk_id").val(data.id);
                    $("#sdk_name").val(data.name);
                    $("#pid").val(data.pid);
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['450px', '360px'], //宽高
                        content: $("#edit-main"),
                    });
                }
            });
            var $ = layui.$
            //增加
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                //页面层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['450px', '360px'], //宽高
                    content: $("#add-main"),
                });
            });
            $("#projectName").change(function() {
                var url=window.location.href
                var andStr = "?";
                var beforeparam = url.indexOf("?");
                if(beforeparam != -1){
                    url=url.split("?")[0];
                }
                window.location.href= url + andStr + "projectName" + "="+ encodeURIComponent($(this).val()); //将汉字转码, 取用时解码
            })
        });
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;
            //表单验证
            // form.verify({
            //     firstpwd: [/(.+){6,12}$/, '密码必须6到12位'],
            //     secondpwd: function (value) {
            //         if (value != $("#firstpwd").val()) {
            //             $("#secondpwd").val("");
            //             return '确认密码与密码不一致';
            //         }
            //     },
            //     productCodes: function (value) {
            //         if (value == '') {
            //             return "请选择系统分配";
            //         }
            //     },
            //     sysqx: function (value) {
            //         if (value == '') {
            //             return "请选择权限";
            //         }
            //     }
            // });
            //提交监听事件
            form.on('submit(save)', function (data) {
                params = data.field;
                submit($, params);
                return false;
            })
            //修改时提交监听事件
            form.on('submit(save2)', function (data) {
                params = data.field;
                submit2($, params);
                return false;
            })
            var obj = document.getElementById('closeBtn');
            obj.addEventListener('click', function cancel() {
                CloseWin();
            });
        })
        //增加提交
        function submit($, params) {
            $.ajax({
                type:"post",
                url:baseUrl2+Interface,
                data: params, 
                xhrFields: {
                    withCredentials: true
                },
                success:function (res) {
                    if (res.code != 0) {
                        alert(res.msg)
                    }else {
                        layer.msg(res.msg, {
                            icon: 0,
                            time: 500
                        }, function () {
                            location.reload(); // 页面刷新
                            return false
                        })
                    }
                }
            });
        }
        //修改提交
        function submit2($, params) {
            $.ajax({
                type:"PUT",
                url:baseUrl2+Interface, 
                xhrFields: {
                    withCredentials: true
                },
                data: JSON.stringify(params), 
                success:function (res) {
                    if (res.code != 0) {
                        alert(res.msg)
                    }else {
                        layer.msg(res.msg, {
                            icon: 0,
                            time: 500
                        }, function () {
                            location.reload(); // 页面刷新
                            return false
                        })
                    }
                }
            });
        }
        // debugger;
        //关闭页面
        function CloseWin() {
            parent.location.reload(); // 父页面刷新
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭 
        }
    </script>
</body>
</html>

当然, 笔者还写入些许样式。不过差别不大

maybe0209
关注
  • 3
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
springboot+mybatis+mysql+layUI+thymeleaf实现增删改查
04-04
在本项目中，我们利用了SpringBoot、MyBatis、MySQL、LayUI和Thymeleaf这五种核心技术，构建了一个完整的Web应用程序，实现了学生信息管理系统的增删改查功能。下面将对这些技术及其在项目中的应用进行详细解释。 *...
buildView:ThinkPhP 基于layui构建视图增删改查
05-23
buildView##ThinkPhP 适用于ThinkAdmin后台框架，layui构建视图增删改查。使用下面的命令来快速创建一个对应模型和控制器php think make:admin UserController --model=User表格基本使用use buildView\Grid;use app\...
LayUI之CRUD(增删改查)
oyang的博客
07-21 1887
使用LayUI界面实现用户的增删改查.
Layui表格纯前端增删改操作的实现
qq_44120945的博客
04-01 407
Layui表格纯前端增删改操作的实现 https://jingyan.baidu.com/article/49ad8bce1887e71835d8fa75.html
管理系统中layui的一些常规操作，增加、修改、删除、查询
最新发布
yncjxnc的博客
05-15 232
对于一个管理系统，数据操作通常有增加、修改、删除、查询，对于老码农来讲，layui是非常适合的，比vue要简单很多。以下是一个文章管理的例子。
layui增删改查
weixin_67338832的博客
07-20 590
先选中要测试的dao，然后输入junit，再选择第一个然后点击next。查询的dao方法没问题。
TP6实现增删改查（完整代码见tp6layui项目）
weixin_46398352的博客
01-05 539
echo json_encode(['code'=>0,'msg'=>'删除成功']);F12--网络--名称，点击相应的方法，就能看到前端传过来的数据。layer.confirm('确定要删除吗？给前端反馈信息可以用：（完整代码见tp6layui项目）btn: ['确定','取消']二，print_r查看后端是否接收到前端的数据。六，controller与view的对应。三，View::assign给前端。一，前端向后端发起请求。四，前端展示后端的数据。七，tp6的权限管理。
php+mysql+layui开发学生信息管理系统 增删改查导出excel
withkai44的博客
06-29 877
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>学生信息管理平..
python+Django+layui 实现web 列表增删改查
04-30
Django 学习实例 第四节：实现列表的增删改查 代码如下: views.py  dblist.js  dblist.html  dbadd.html
Spring+mybatis+layui实现增删改查，分页，导入导出功能源代码
04-10
本套源代码实现了Spring 和 mybatis 和 layui 集成情况下的基础操作，包括： 增删改查、分页、导入导出等功能。数据库为mysql，脚本在源代码根目录下，mybatis_crud.sql
spring+spring Mvc+mybatis+layui实现数据表格的增删改查
05-13
这是通过ssm+layui 实现的简单的对数据表格的增删改查，所有页面纯由layui实现。如果你是新手学习layui，那这个绝对会对你有很大的帮助； 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
10-15
今天小编就为大家分享一篇layui table表格数据的新增,修改,删除,查询,双击获取行数据方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端表格增删查改例子bootstrap+layer+jquery
12-12
jQuery练习写的前端表格小例子，由于公司用bootstrap样式和layer弹窗居多，因此这增加、修改部分运用了弹窗，欢迎大家参考。
layui实现基础的增删改查
YECHANG1450的博客
02-22 2289
layui实现增删改查 开始当然是查了
layui-crud
小码哥222的博客
11-25 466
layuiCRUD 1、页面html <!-- 数据表格开始 --> <table class="layui-hide" id="userTable" lay-filter="userTable"></table> <div style="display: none;" id="userToolBar"> <button type="button" class="layui-btn layui-btn-sm" lay-event
使用layui库来实现学生信息的增删改查
zy的博客
04-06 1840
使用layui库来实现学生信息的增删改查 js实现学生信息的增删改查 jQuery实现学生信息的增删改查 不用写ajax代码，layui里面自带 layui注册.html:用户的注册，注册成功，跳转登录页面 layui登录.html:用户的登录，登录成功，跳转页面 layui.js:下载地址：https://layui.itze.cn/ jquery-1.12.4.min.js:https://jquery.com/ mock-min.js:下载地址：http://mockjs.com/ 注意：注册信息
layui前端页面的增删改查
weixin_61585849的博客
07-19 1194
layui和java交互
layui表格弹窗修改_layui 增删改查 弹出框
weixin_33219985的博客
01-17 877
layui+SpringBoot实现表格增删改查
热门推荐
云深不知处
07-27 2万+
前文演示了如何后端数据渲染在前端表格，接下来本文将演示如何在前端增加、删除和编辑数据。 本文使用的是通过按钮点击事件弹出
layui表格增删改查
05-19
layui是一款优秀的前端UI框架，其中包含了丰富的组件，包括表格组件，可以用来实现表格的增删改查功能。 首先，在HTML页面中引入layui的...以上代码实现了一个简单的表格增删改查功能，你可以根据自己的需求来修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值