Layui表单如何回显

在 layui 中，可以使用 form.val() 方法来实现表单数据的回显。而要实现点击页面后，日期控件的值变为当前时间，可以通过 JS 获取当前时间并将其赋值给日期控件。 以下是一个示例代码： HTML 代码： ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">日期</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="date" name="date"> </div> </div> </form> ``` JavaScript 代码： ```javascript layui.use(['form', 'laydate'], function(){ var form = layui.form; var laydate = layui.laydate; // 渲染日期选择器 laydate.render({ elem: '#date', format: 'yyyy-MM-dd', value: new Date() }); // 模拟表单数据 var data = { date: '2021-01-01' }; // 表单数据回显 form.val('example', data); // 点击页面，日期控件的值变为当前时间 $(document).on('click', function(){ var now = new Date(); laydate.render({ elem: '#date', format: 'yyyy-MM-dd', value: now }); }); }); ``` 在上面的示例代码中，我们首先渲染了一个日期选择器，并将其默认值设置为当前时间。然后模拟了一组表单数据，并使用 form.val() 方法将其回显到表单中。 最后，我们使用 jQuery 的 .on() 方法监听页面的点击事件。当页面被点击时，我们获取当前时间并将其赋值给日期控件，从而实现了点击页面后，日期控件的值变为当前时间的效果。

### 实现 Layui 中 Radio 组件的选中状态回显 在 Layui 框架中，可以通过 JavaScript 动态设置 `radio` 的选中状态并重新渲染表单组件来实现回显功能。以下是具体实现方法： #### HTML 部分 定义一个表格结构，并通过模板引擎动态加载数据。 ```html <table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs layui-bg-blue " lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` #### 表格配置部分 初始化表格时，需指定列字段以及操作按钮列。 ```javascript { field: "op", title: "操作", width: "15%", align: "center", templet: "#barDemo" } ``` #### 数据回显逻辑 当获取到服务器返回的数据后，在回调函数中处理每一行数据，判断当前用户的 ID 是否匹配目标行的 ID。如果匹配，则手动触发该行对应的 `radio` 并更新其选中状态[^1]。 ```javascript done: function (res, curr, count) { if (userId !== '') { // userId 是全局变量，表示当前登录用户ID $.each(res.data, function (idx, val) { if (userId === val.id) { // 判断是否为目标行 val["LAY_CHECKED"] = 'true'; // 设置 LAY_CHECKED 属性为 true // 找到对应数据改变勾选样式，呈现选中效果 let index = val['LAY_TABLE_INDEX']; $('tr[data-index=' + index + '] input[type="radio"]').prop('checked', true).trigger('click'); // 刷新 radio 选择框渲染 layui.form.render('radio'); } }); } } ``` 上述代码片段实现了以下功能： - **条件筛选**：遍历服务端返回的数据列表，查找与当前用户 ID 匹配的目标行。 - **属性修改**：将目标行对象中的自定义属性 `"LAY_CHECKED"` 设为 `'true'`，用于标记此行为已选中状态。 - **DOM 更新**：利用 jQuery 修改 DOM 节点的状态，确保前端界面同步反映后台数据的变化。 - **重绘组件**：调用 `form.render()` 方法强制刷新 Layui 表单控件，使更改生效。 #### DAO 层支持 为了提供完整的解决方案，DAO 层应负责查询数据库中的省份、城市和地区信息。这些基础数据可以作为下拉菜单或其他关联选项的内容展示给用户[^3]。 ```java public List<Map<String, Object>> initProvince() { String sql = "select * from province"; return jt.queryForList(sql); } public List<Map<String, Object>> initCity(Integer pid) { String sql = "select * from city where pid=?"; return jt.queryForList(sql, pid); } public List<Map<String, Object>> initDist(Integer cid) { String sql = "select * from dist where cid=?"; return jt.queryForList(sql, cid); } ``` 以上 Java 方法分别用于初始化省市区三级联动所需的原始数据集合。 --- ###