layui的表单与表格使用详解

最新推荐文章于 2024-04-02 14:47:09 发布
最新推荐文章于 2024-04-02 14:47:09 发布
阅读量2.2k 收藏 5
点赞数 1
分类专栏： 前端
原文链接：https://blog.csdn.net/lamfang/article/details/89330774
版权

原文出处:https://blog.csdn.net/lamfang/article/details/89330774

一、开始前准备
到官网下载layui需要的文件
在html文件里面导入：

<script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/css/layui.mobile.css">
    <!--顺便引入jquery在线文件-->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

二：表单的使用
全部html的代码：

   <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">账户</label>
            <div class="layui-input-block">
                <input type="text" name="title" required id="eMail" value="123@qq.com"  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like" value="1" title="写作">
                <input type="checkbox" name="like" value="2" title="阅读" checked>
                <input type="checkbox" name="like" value="3" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


代码说明：
通过给元素的class赋值使用layui给定的官方样式

在这里插入图片描述 

还有其他元素的样式通过查看文档给它赋值就行了。

在这里插入图片描述 效果图如下：在这里插入图片描述

重点在于JS代码的编写，此处的JS代码直接放在表格html文件下的

ayui.use('form', function(){
        $("#eMail").blur(function(){
            $.ajax({
                type: "get",
                url: "/checkAdmin"+$("#eMail").val(),
                success:function(data){
                    if(data.code!=0){
                        layer.msg(data.msg);
                        $("#eMail").val("");
                        $("#eMail").focus();
                    }
                }
            });
        });
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            var arr = new Array();
            //将复选框选中的内容用，拼接成字符串
            var inputs = document.getElementsByName("like")
            for(var i = 0; i < inputs.length;i++){
                if (inputs[i].checked)
                arr.push(inputs[i].value);
            }
            data.field.like = arr.join(",")
            
//ajax请求的参数直接用data.field获取表单里含有name属性的元素的值
            $.ajax({
                type: "post",
                url: "/layui/formSubmit",
                data:data.field,
                dataType:"json",
                success:function(d){
                    if(d.code==200){
                        layer.msg("请求成功");
                    }else{
                        layer.msg("错误码为200");
                    }
                }
            });
            return false;//false表示不重新加载页面，true表示重新加载
        });
    });

通过调用layui.use使用你需要用的layui模块，比如这里就是form模块，

在这里插入图片描述

 匿名函数function是回调函数，当form模块加载完毕后，就会调用这个回调函数，一般所有的代码都放在回调函数里面    

  $("#eMail").blur(function(){
            $.ajax({
                type: "get",
                url: "/checkAdmin"+$("#eMail").val(),
                success:function(data){
                    if(data.code!=0){
                        layer.msg(data.msg);
                        $("#eMail").val("");
                        $("#eMail").focus();
                    }
                }
            });
        });

这个代码部分的作用：比如这是个注册表单，当用户输入账号、跳出账号框时，将账号信息发送到后台，让后台返回当前账户是否已经被注册过的信息，提供更好的反馈性。

当用户点击按钮提交时的js代码：

  var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            var arr = new Array();
            //将复选框选中的内容用','拼接成字符串
            var inputs = document.getElementsByName("like")
            for(var i = 0; i < inputs.length;i++){
                if (inputs[i].checked)
                arr.push(inputs[i].value);
            }
            //ajax请求的参数直接用data.field获取表单里含有name属性的元素的值
            data.field.like = arr.join(",")
            $.ajax({
                type: "post",
                url: "/layui/formSubmit",
                data:data.field,
                dataType:"json",
                success:function(d){
                    if(d.code==200){
                        layer.msg("请求成功");
                    }else{
                        layer.msg("错误码为200");
                    }
                }
            });
            return false;//false表示不重新加载页面，true表示重新加载
        });

form.on(‘submit(formDemo)’, function(data) 里的’submit(formDemo)'与html里的提交按钮是相对应的。

<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

三、数据表格的使用
效果图：

在这里插入图片描述

 html的代码部分很简单：

<body>
<!--搜索栏-->
<div class="layui-inline">
    <input class="layui-input" name="id"  id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="search" data-type="reload">全称搜索</button>
<!--layui的数据表格-->
<table id="demo" lay-filter="demo"></table>
</body>

JS的全部代码：


<script>

    layui.use(['table'],function () {
        var table = layui.table;
        table.render({
      
            id:'demo',
             //elem对应于html里table的id
            elem: '#demo'
            ,url: "/layui/data" //数据接口
            //where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值
            ,where:{searchable:false,search:"something"}
            //解析返回的数据
        //     response: {
        //     statusName: 'status' //规定数据状态的字段名称，默认：code
        //         ,statusCode: 200 //规定成功的状态码，默认：0
        //         ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
        //         ,countName: 'total' //规定数据总数的字段名称，默认：count
        //         ,dataName: 'rows' //规定数据列表的字段名称，默认：data
        // } ,
        //   ,cellMinWidth: 80
            ,limit:10//每页默认数
            ,limits:[10,20,30,40] //分页的下拉框（即选择每页有多少条数据)
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'//头部工具栏，这里引用的是id为toolbardemo的script标签，下文给出
            //表格属性
            ,cols: [
                [ //第一列的复选框
                {type:'checkbox'}
          // field用来指定该列对应的是json数据的哪一个属性
          //          title表示列头的名称，sort表示该列是否开启排序
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'username', title: '登陆名'}
                ,{field:'fullname', title: '全称'}
                ,{field:'email', title: '邮箱'}
                //templet用来在做一些html的渲染，这里是id为sexTpl的script标签
                ,{field:'sex', title: '性别',templet: '#sexTpl'}
                ,{field:'phone', title: '联系方式'}
                ,{field:'roleName', title: '角色'}
                //toolbar表示这一列是一个行内工具栏
                ,{title: '操作',toolbar: '#barEdit'}
            ]
            ]
            // ,where: {timestamp: (new Date()).valueOf()}
        });
        //监听头部工具条事件
        $("#selected").click(function () {
            var checkStatus = table.checkStatus('demo')
                ,data = checkStatus.data;
            var datastr = "";
            for(var i = 0; i < data.length;i++){
                datastr += data[i].id + ",";
            }
            layer.alert(datastr)
        })
        //监听单元格编辑
        table.on('edit(demo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });
        //监听搜索
        $("#search").click(function () {
            var str = $("#demoReload").val();
            console.log(str)
            //执行重载
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    key: str
                }
            });

        })
        //监听行工具事件
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value,

                    });
                    layer.close(index);
                });
            }
        });
    })
</script>

这是头部工具栏的script标签

在这里插入图片描述
 

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="selected" lay-event="selected">获取选中的用户id</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

行内工具栏（即效果图里的操作与删除）

 在这里插入图片描述

 <script type="text/html" id="barEdit">
    <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>

后端传来的性别一般是0和1表示，这是将0和1转换成汉字的script标签：

在这里插入图片描述
 

<script type="text/html" id="sexTpl">
    {{#  if(d.sex === '0'){ }}
    <span style="color: #F581B1;font-weight: bolder;">女</span>
    {{#  } else if(d.sex === '1'){ }}
    <span style="color: #FF5722;font-weight: bolder;">男</span>
    {{#  } else{ }}
    <span style="color: #c1e2b3;font-weight: bolder;">保密</span>
    {{#  } }}
</script>

代码说明：
   

    //监听头部工具条事件
        $("#selected").click(function () {
            var checkStatus = table.checkStatus('demo')
                ,data = checkStatus.data;
            var datastr = "";
            for(var i = 0; i < data.length;i++){
                datastr += data[i].id + ",";
            }
            layer.alert(datastr)
        })

获取选中的用户id按钮是方便以后的一些批量操作，效果如图：

在这里插入图片描述

 搜索的处理

在这里插入图片描述
       

//监听搜索
        $("#search").click(function () {
            var str = $("#demoReload").val();
            console.log(str)
            //执行重载
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    key: str
                }
            });

 

        })


通过jquery获取到输入框的搜索值，然后调用table.reload函数重载数据表格，page指定layui以第几页开始，where里放入我们的搜索值传递给后台。

四、其他
可以利用layer.msg()，layer.alert(datastr)显示一些简单的弹出层

在这里插入图片描述

 在这里插入图片描述

 datatable的全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <!--<link rel="stylesheet" href="../layui/css/layui.mobile.css">-->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--搜索栏-->
<div class="layui-inline">
    <input class="layui-input" name="id"  id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="search" data-type="reload">全称搜索</button>
<!--layui的数据表格-->
<table id="demo" lay-filter="demo"></table>
</body>
<script>

    layui.use(['table'],function () {
        var table = layui.table;
        table.render({
            id:'demo',
            elem: '#demo'
            ,url: "/layui/data" //数据接口
            //where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值
            ,where:{searchable:false,search:"something"}
            //解析返回的数据
        //     response: {
        //     statusName: 'status' //规定数据状态的字段名称，默认：code
        //         ,statusCode: 200 //规定成功的状态码，默认：0
        //         ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
        //         ,countName: 'total' //规定数据总数的字段名称，默认：count
        //         ,dataName: 'rows' //规定数据列表的字段名称，默认：data
        // } ,
        //   ,cellMinWidth: 80
            ,limit:10//每页默认数
            ,limits:[10,20,30,40] //分页的下拉框（即选择每页有多少条数据)
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'//头部工具栏，这里引用的是id为toolbardemo的script标签
            //表格属性
            ,cols: [
                [ //第一列的复选框
                {type:'checkbox'}
          // field用来指定该列对应的是json数据的哪一个属性
          //          title表示列头的名称，sort表示该列是否开启排序
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'username', title: '登陆名'}
                ,{field:'fullname', title: '全称'}
                ,{field:'email', title: '邮箱'}
                //templet用来在做一些html的渲染，这里是id为sexTpl的script标签
                ,{field:'sex', title: '性别',templet: '#sexTpl'}
                ,{field:'phone', title: '联系方式'}
                ,{field:'roleName', title: '角色'}
                //toolbar表示这一列是一个行内工具栏
                ,{title: '操作',toolbar: '#barEdit'}
            ]
            ]
            // ,where: {timestamp: (new Date()).valueOf()}
        });
        //监听头部工具条事件
        $("#selected").click(function () {
            var checkStatus = table.checkStatus('demo')
                ,data = checkStatus.data;
            var datastr = "";
            for(var i = 0; i < data.length;i++){
                datastr += data[i].id + ",";
            }
            layer.alert(datastr)
        })
        //监听单元格编辑
        table.on('edit(demo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });
        //监听搜索
        $("#search").click(function () {
            var str = $("#demoReload").val();
            console.log(str)
            //执行重载
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    key: str
                }
            });

        })
        //监听行工具事件
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value,

                    });
                    layer.close(index);
                });
            }
        });


    })
</script>
<script type="text/html" id="barEdit">
    <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>
<script type="text/html" id="sexTpl">
    {{#  if(d.sex === '0'){ }}
    <span style="color: #F581B1;font-weight: bolder;">女</span>
    {{#  } else if(d.sex === '1'){ }}
    <span style="color: #FF5722;font-weight: bolder;">男</span>
    {{#  } else{ }}
    <span style="color: #c1e2b3;font-weight: bolder;">保密</span>
    {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="selected" lay-event="selected">获取选中的用户id</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
</html>

六、后端返回数据格式说明

{
"code":0,//请求状态码，0代表请求成功
"msg":"",//请求出错时后端返回的反馈信息
"data":[{"id":5,"username":"fg","fullname":"fgsfg","email":"666@qq.com","sex":1,"phone":"2222","rolename":"888"},{"id":6,"username":"fgfg","fullname":"hhh","email":"666@qq.com","sex":2,"phone":"99999","rolename":"dfsdf"},{"id":7,"username":"jklkl","fullname":"jfg","email":"666@qq.com","sex":0,"phone":"999","rolename":"999"},{"id":10,"username":"用户+i","fullname":"人0","email":"5555@qq.com","sex":0,"phone":"100686","rolename":"管理员"},{"id":11,"username":"用户+i","fullname":"人1","email":"5555@qq.com","sex":1,"phone":"100686","rolename":"管理员"},{"id":12,"username":"用户+i","fullname":"人2","email":"5555@qq.com","sex":2,"phone":"100686","rolename":"管理员"},{"id":13,"username":"用户+i","fullname":"人3","email":"5555@qq.com","sex":0,"phone":"100686","rolename":"管理员"},{"id":14,"username":"用户+i","fullname":"人4","email":"5555@qq.com","sex":1,"phone":"100686","rolename":"管理员"},{"id":15,"username":"用户+i","fullname":"人5","email":"5555@qq.com","sex":2,"phone":"100686","rolename":"管理员"},{"id":16,"username":"用户+i","fullname":"人6","email":"5555@qq.com","sex":0,"phone":"100686","rolename":"管理员"}],

"count":603 //数据的长度
}

永泽心语
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui表格动态添加|layui表格可编辑
08-24
layui表格动态添加|layui表格可编辑动态添加
layui表头样式_layui表格的样式设置
weixin_27943395的博客
02-17 2886
该楼层疑似违规已被系统折叠隐藏此楼查看此楼layui表格的样式设置~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~开发工具与关键技术：Visual Studio 2015、作者：梁柏源撰写时间：2019/7/17~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
LayUI数据表格的使用指南
最新发布
2401_84008947的博客
04-02 387
关于分布式，限流+缓存+缓存，这三大技术（包含：ZooKeeper+Nginx+MongoDB+memcached+Redis+ActiveMQ+Kafka+RabbitMQ）等等。这些相关的面试也好，还有手写以及学习的笔记PDF，都是啃透分布式技术必不可少的宝藏。以上的每一个专题每一个小分类都有相关的介绍，并且小编也已经将其整理成PDF啦《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门即可获取！
关于layui框架的form表单布局（小白向）
我是一只蘑菇17的博客
10-12 3399
在使用form表单的时候，必须先声明form模块，否则select、checkbox、radio等将无法显示，并且无法使用form相关功能，这是很多小白一开始经常犯的错误，虽然这很简单但也很基础，所以有必要在这里提一下。但通常来讲，我们不需要这么长的input，我们可以把外面的div的类换成class="layui-input-inline"试试。一般来讲，添加不同元素名和默认的layui-inline的效果是不一样的，这个就需要大家多加试验来挑选合适自己的类。但是这样并不好看，我们通常是这样使用。
springboot 架构集成layui实现主从结构数据维护UI篇
zhrzhhymaffia的专栏
04-08 699
上一节描述了实现主从结构数据维护时，后台的代码注意事项。本节着重介绍前端基于layui怎么实现数据维护功能。 主要描述怎么实现数据表格维护及表格数据提交功能。 layui表格编辑功能 首先定义一个变量，用于接收controller层传递过来的对象数据。 <script data-th-inline="javascript"> productinStorage = [[...
原生JS+layui项目笔记（一）【layer弹出框与form、table】
sinat_38011533的博客
08-09 1481
一、准备文件 1. html文件引入 <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript" src="./xxx/xxxx.js"></script> 2.js文件引入layui的各种组件 layui.use(['jquery',layer','table','form','laytpl','laydate'].
layui问题总结
zhufan2333的博客
07-21 971
标签如果是button，会请求两次后台数据，如果不写data-type会请求一次，但搜索的表单数据不能传到后台。在同一页面渲染多个laydate组件的时候不能像下面那样写，会冲突覆盖，导致只能渲染第一个。实例化一个表格的时候table.render里面设置表头格式不对（多了个逗号）表单的提交文件，除非特殊要求，一般情况下，都是跟表单所有属性一起提交。submit如果不returnfalse会重新刷新页面。解决不写button标签，写成a标签。自动提交为false。...
layui框架学习（14：表单-上）
gc_2299的博客
03-18 1671
学习并记录layui框架中页面元素的表单的整体结构样式设置方式。
layui介绍及入门基础（看我这篇就会了！！！）
m0_73647713的博客
07-10 1万+
layui（谐音：类 UI)是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
Layui 修改表格样式
遇见--专栏
12-21 4488
使用Layui做表格显示数据时候，不要自定义表格，但是layui的css已经写好了，这个时候要改layui的css就比较麻烦，本文我总结了layui表格风格更改样式。
layui给数据表格某列添加样式的三种方法
热门推荐
凌云鹤YK
12-12 2万+
layui给数据表格列添加样式一、方式一（最简单的方法）二、方式二（利用template）三、方式三（在数据返回前做好处理，也就是写入html代码） layui给数据表格列添加样式的方式目前我就发现三种方式，如下是给表格的列“类型”添加字体颜色的三种方式。 一、方式一（最简单的方法） 如下给列“类型”添加了字体颜色#f67d06 layList.tableList('userList',&amp;quot;{:Ur...
对layui中表单元素的使用详解
01-19
<div class=layui-input-block> <input type=radio name=sex value=0 title=男> ，class属性是固定写法。 这样写好了以后，你如果是写在静态页面，这样式可以看见效果，如果写在js里，这样写了还有一步得写，...
layui实现数据表格点击搜索功能
10-16
主要为大家详细介绍了layui实现数据表格点击搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
转换layUI的数据表格中的日期格式方法
10-16
今天小编就为大家分享一篇转换layUI的数据表格中的日期格式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
data参数 layui_layui ajax传参的data类型
weixin_28678517的博客
12-24 2940
前台layui table组件，后台是PHP，监听btn-submit按纽传递数据交互一般用ajax传参时，其语法为form.on(‘submit(add)’,function(data){// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象// console.log(data.form) //被执行提交的form对象，一般在存在form标签...
Layui的基础用法
z18403449930的博客
08-08 1371
个人使用Layui的记录 Layui使用表格 HTML代码： 注意：其中的lay-filter是要与表格的一些点击事件绑定的，不可忘记填写。 <div class="divContent"> <div class="layui-card"> <div class="layui-form layui-card-header layuiadmin-card-header-auto layui-search"> <div
layui总结(一) Layui-form
qq_45809464的博客
03-01 2878
layui总结(一) Layui-form 代码框架 表单样式 监听事件
layui laydate type=‘time‘ 只显示时分
清叶 的专栏
10-21 516
<style type="text/css"> /**以一刻钟为单位 */ .layui-laydate-list.laydate-time-list > li { width: 50%; } .layui-laydate-list.laydate-time-list > li:nth-child(3) { display: none !important; } </style> layda.
layui可编辑表格新增、保存、删除操作以及注意事项
Edward·Che的博客
10-11 1万+
Layui一直是本小编使用的前端，因为使用方便可操作性强外观美观，让后端全栈的小编感觉很巴适。总结使人进步，那么现在我就直接撒干货了。这篇博文分两部分吧，显示总结性的讲解一下，然后小编会在第二部分把源码直接粘出来与大家共享，一是方便以后自己用了可以直接拿过来用，二是方便有困难的小伙伴直接粘贴一个demo来根据自己的需求改进。这篇文章会直接吧可编辑列表的新增一行、删除、更新以及查询都...
layui 表单 下表格点击提交后批量提交
03-22
非常感谢您的提问。对于您的问题，我可以提供以下建议：您可以使用 layui 的表格模块中的 on('edit') 事件来监听表格中的编辑操作，然后将修改后的数据提交到后台进行批量更新。具体实现可以参考 layui 官方文档中的示例代码。希望这个建议能够帮助到您。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值