精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui table数据修改的回显方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui form 表单数据回显

    千次阅读 2019-10-24 13:39:04
    点击修改按钮后,查询的数据需要回显表单中,再进行修改,保存 语法 语法:form.val('filter', object); 用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为...

    前言

    点击修改按钮后,查询的数据需要回显到表单中,再进行修改,保存

    语法

    语法:form.val('filter', object);

    用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值。

    例子

    <form class="layui-form" lay-filter="scoreRuleForm">
            <div class="layui-form-item">
                <label class="layui-form-label">证件</label>
                <div class="layui-input-inline">
                    <select name="actionType" id="actionType" lay-filter="actionType">
                        <option value="UNLICENSEUPGRADE" selected="selected">无证</option>
                        <option value="INSPECTION">有证</option>
                    </select>
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">商店</label>
                <div class="layui-input-inline">
                    <select name="merchantType" id="merchantType" lay-filter="merchantType">
                        <option value="ORG" selected="selected">企业</option>
                        <option value="PERSON">个人</option>
                    </select>
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">等级</label>
                <div class="layui-input-inline">
                    <select name="mccGrade" id="mccGrade" lay-filter="mccGrade">
                        <option value="A" selected="selected">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                    </select>
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">次数限制</label>
                <div class="layui-input-inline">
                    <input type="text" id="operationCount" name="operationCount" lay-verify="required|number" placeholder="请输入次数限制"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">分数</label>
                <div class="layui-input-inline">
                    <select name="scoreOperationType" id="scoreOperationType" lay-filter="scoreOperationType">
                        <option value="FIXED" selected="selected">固定值</option>
                        <option value="RAT">百分比</option>
                    </select>
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">分数值</label>
                <div class="layui-input-inline">
                    <input type="text" id="score" name="score" required lay-verify="required|number" placeholder="请输入分数值"
                           autocomplete="off" class="layui-input">
                </div>
                <span id="fuhao" style="font-size: 20px; display: none">%</span>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">加减分</label>
                <div class="layui-input-block">
                    <input id="add" type="radio" name="addScore" value="A" title="A(加分)">
                    <input id="mins" type="radio" name="addScore" value="B" title="B(减分)">
                </div>
            </div>
    
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="saveProdButton" lay-submit>保存</button>
                    <button class="layui-btn layui-btn-normal" id="back">取消</button>
                </div>
            </div>
        </form>

    赋值(回显):

    form.val("scoreRuleForm", { // class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "actionType": result.actionType, // "name": "value"
                    "addScoreOption": result.addScoreOption,
                    "merchantType": result.merchantType,
                    "mccGrade": result.mccGrade,
                    "operationCount": result.operationCount,
                    "scoreOperationType": result.scoreOperationType,
                    "score": result.score,
                    "addScore": result.addScore
                });

     解释

    使用 标签"name" 属性,进行赋值,即可实现表单数据回显

    展开全文
  • 如何在表单页面,回显数据??? layui提供:表单初始化赋值 链接:https://www.layui.com/doc/modules/form.html#val 代码如下: // formTest 就是class="layui-form" 所在元素对应的 lay-filter="" 对应的值 ...

    如何在表单页面,回显数据???

    layui提供:表单初始化赋值   链接:https://www.layui.com/doc/modules/form.html#val

    代码如下:

     

    // formTest 就是 class="layui-form" 所在元素对应的 lay-filter="" 对应的值 代码如下:

    form.val("formTest", {
        "username": "名字" // "name": "value"
        ,"sex": "女"
        ,"auth": 3
        ,"check[write]": true
        ,"open": false
        ,"desc": "我爱layui"
    })
    

    根据ID请求后台数据,在成功回调里面执行,代码如下:

    form.val()里面的key:就是大家表单元素的name

    比如:第一个event,就是你的页面上的input,代码如下:

    展开全文
  • 今天小编就为大家分享一篇关于layui时间回显问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • LayUI编辑表单回显简单实现 在网上看了好多文章实现的都太复杂,在b站看视频发现一个简单的实现方法。 LayUI官网文档说明 事件监听的时候其实控制台是拿到数据的,所以我们只要根据lay-filter属性输出就行。 监听...

    LayUI编辑表单回显简单实现

    在网上看了好多文章实现的都太复杂,在b站看视频发现一个简单的实现方法。

    LayUI官网文档说明
    LayUI官网文档说明
    事件监听的时候其实控制台是拿到数据的,所以我们只要根据lay-filter属性输出就行。

    监听代码块,可以输出查看,点击编辑按钮

    table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data; //获得当前行数据
                var jsonData = JSON.stringify(data);
    
                if (obj.event === 'edit') {
                    console.log(obj)
    

    有对象信息

    直接用form.val()方法实现回显,一行代码实现。

    <!-- 修改信息的弹出层 -->
     <div class="layui-form layuimini-form" lay-filter="edit">
     <div class="layui-form-item">
                <label class="layui-form-label required">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">身份证号码</label>
                <div class="layui-input-block">
                    <input type="text" name="idCard" lay-verify="required|identity" lay-reqtext="身份证号码不能为空" placeholder="请输入身份证号码" value="" class="layui-input">
                </div>
            </div>
    </div> 
    

    实现

    var index = layer.open({
                        title: '编辑用户',
                        type: 1,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: [openWH[0] + 'px', openWH[1] + 'px'],
                        offset: [openWH[2] + 'px', openWH[3] + 'px'],
                        content: content,
                        success:function () {
                            //表单数据回显
                            form.val("edit",data);
    
                        }
    
                    });
    

    在这里插入图片描述

    展开全文
  • 目的: 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内。如下图: Html 代码: <body> <div class=layui-form lay-filter=useradmin id=useradmin> <div class=layui-form-item> <label class=layui-...
  • layui 单选框回显

    2021-07-19 11:17:52
    div class="layui-form-item timo-finally"> <label class="layui-form-label required">是否:</label> <div class="layui-input-block"> <input name="whetherCooperation" value="1" ...
        <div class="layui-form-item timo-finally">
            <label class="layui-form-label required">是否:</label>
            <div class="layui-input-block">
                <input name="whetherCooperation" value="1" type="radio" title="是">是
                <input name="whetherCooperation" value="2" type="radio" title="否">否
            </div>
        </div>
    
        var  whetherCooperation=?;//后台传的数据
        var radio = document.getElementsByName("whetherCooperation");
        var radioLength = radio.length;
        for (var i = 0; i < radioLength; i++) {
            if (whetherCooperation == radio[i].value) {
                $(radio[i]).click();
            }
        }
    
    展开全文
  • layui上传图片回显

    千次阅读 2020-12-28 15:44:12
    button type="button" class="layui-btn" id="test1"> <i class="layui-icon">&#xe67c;</i>上传图片 </button> <input type="text" id="pictureID" name="pictureID" /> <div ...
  • layui 数据回显 radio设置选中状态

    千次阅读 2020-05-02 15:20:41
    div class="layui-form-item"> <label class="layui-form-label">是否付清</label> <div class="layui-input-block"> <input id="left" type="radio" name="payOff" value="1" title=...
  • layui的iframe弹出层的表单数据回显

    千次阅读 热门讨论 2020-03-07 19:38:31
    一. 问题背景 父页面:list.jsp 子页面:userEdit.jsp 点击‘编辑’,将数据回显表单,如下: 二. 解决方案 关键代码如下: layer.open({ type: 2, title: '编辑信息', area: ['750px', '755px'], ...
  • layui开关按钮回显

    千次阅读 2020-01-16 15:15:43
    最近公司在试用layui 框架进行开发,碰到了开关按钮修改回显的问题。下面给大家上代码: 新增开关按钮 <div class="layui-form-item"> <label class="layui-form-label" style="width: 135px;">是否...
  • layUI弹窗数据回显

    2021-03-03 18:41:47
    { //表单数据回显 form.val("dataFrm",data) } }); //数据回显发生在表格渲染之后,所以可以展示数据,但是不能提前拿到值 //window.id方法可以在渲染前拿到值,用于URL请求数据 function openUpdateWindow(data) { ...
  • html <div class="layui-input-inline"> <input type="text" id="effectStartTime" name="effectStartTime" lay-verify="required" readonly
  • layUI:编辑数据表格及数据回显

    千次阅读 2019-09-18 16:01:03
    编辑数据表格的某条数据,弹框数据回显功能。具体实现挺简单,先给出代码,下面是整个HTML页面代码,觉得繁琐的可以直接跳过到后面,我会按步骤讲解数据回显功能该如何实现。 <%@ page contentType="text/html...
  • 后面的id需要和 getQueryVariable(" ")括号里面的值相同 进行数据回返时需要通过layui表单赋值进行反值,form.val(‘From’, { })中的"From"即 edit.html页面中的class=“layui-form” 所在元素属性 lay-filter="" ...
  • layui表格数据复选框回显设置

    千次阅读 2018-11-15 14:43:41
    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显layui这里有一个坑,...
  • 1.在父类页面进行数据回显采用: var body = layui.layer.getChildFrame(‘body’, index); body.find("#mid").val(data.id); body.find(".twoSelect select").val(data.parentCode); layui....
  • layui弹出层,数据回显

    千次阅读 2020-04-06 18:45:15
    1、效果图 ...function openUpdateEquipmentAccident(data) {//data为当前行数据,即点击修改的那一行 layer.open({ type: 1, title: '修改人身事故信息', content: $("#updateDiv"), area: ['80...
  • layui select回显问题

    千次阅读 2020-07-23 17:22:34
    layui.form.render("select") 不会清空其他select formSelects.render();会清空所有的多选 加载单选的最好放在layui.use('form', function() {...多选的回显放在layui.use(['jquery', 'formSelects'], function(){}中
  • layui table数据修改的回显

    万次阅读 2018-12-03 00:02:49
    其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event...
  • layui上传图片、回显、预览

    千次阅读 2019-12-21 09:40:22
    <link rel="stylesheet" href="<%=path %>/skin/layui/css/layui.css" media="all"> <script src="<%=path %>/skin/layui/layui.js"> layui.use('upload', function(){ var upload = layui.upload , $ = layui....
  • 后台返回一个isManager数据,值为1或0,根据这个值是0还是1回显layui的开关中的on或者off 参考自:layui admin table表格中根据后台数据动态渲染switch开关 二. 解决方案 首先给表格的isManager列绑定一个自定义...
  • 视图层: <!-- 设计类型 --> <script type="text/html" id="quote_sjlx"> <div class="layui-form" >...select class="layui-form quote_sjlx" lay-filter="quoteSelectTb" name="quote_sjlx" d...
  • 今天小编就为大家分享一篇layui实现form表单同时提交数据和文件的代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui弹窗表格数据获取,回显

    千次阅读 2019-06-14 10:33:57
    有a页面,a页面中有新增按钮,点击新增按钮,弹出layui弹窗,弹窗为表格数据,勾选表格数据,确认后将勾选的数据回显在a页面,再点击新增,默认勾选刚才回显的数据。(a页面不调任何接口请求) 1、回显在a页面 在...
  • layui form表单 动态添加、删除input框,以及数据回显 ** 在form表单中,动态增加input框,最多添加5个,删除校验 ** html代码 <form class="layui-form" th:action="@{/basicInfo/update/project}" method="post...
  • layui复选框回显-zwz

    千次阅读 2018-05-27 22:12:27
    初学layui,遇到layui复选框的回显问题。请教朋友后,自己有一点的心得,如下。路过的大佬们,有不正确的地方或者更优的方式,一定请留下您的好方法。需要实现的效果: 从后台中获取data,遍历,将选中的多选框的...
  • 因为项目基于layui库,并且需要在表格里面嵌入select表单元素,选择改变数据之后需要提交改变后的数据,所以记录一下实现的方法。 以下是实现的一个小测试 <!DOCTYPE html> <html lang="en"> <...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 339
精华内容 135
关键字:

layui表单数据回显