layui form 表单数据回显

前言

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

语法

语法：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" 属性，进行赋值，即可实现表单数据回显