Layui表单如何回显

在Layui中回显表单数据可以通过两种方式实现：

1. 使用表单赋值

可以使用 layui.form.val() 方法将数据赋值给表单元素。例如：

// 假设有一个表单元素
<input type="text" name="username" id="username" lay-verify="required" />

// 使用表单赋值
layui.form.val('form', {
  "username": "张三"
});

2. 直接给表单元素赋值

也可以直接给表单元素赋值，例如：

// 假设有一个表单元素
<input type="text" name="username" id="username" lay-verify="required" />

// 直接给表单元素赋值
document.getElementById("username").value = "张三";

以上两种方式都可以实现表单数据的回显，具体选择哪种方式取决于你的实际需求和场景。

相关问题

layui 表单回显 点击页面 日期控件值变成当前时间

在 layui 中，可以使用 form.val() 方法来实现表单数据的回显。而要实现点击页面后，日期控件的值变为当前时间，可以通过 JS 获取当前时间并将其赋值给日期控件。

以下是一个示例代码：

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 代码：

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 rideo 回显

可以使用 layui 的 form 模块和 rideo 组件结合实现回显功能。

首先，需要引入 layui 的相关资源文件：

<!-- 引入 layui 样式文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">

<!-- 引入 layui JavaScript 文件 -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

然后，在页面中添加一个表单，并在表单中使用 rideo 组件：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
</form>

接下来，使用 layui 的 form 模块对表单进行渲染，并通过 JavaScript 代码来实现回显功能：

<script>
  // 使用 layui 的 form 模块对表单进行渲染
  layui.use('form', function(){
    var form = layui.form;

    // 通过 JavaScript 代码实现回显功能
    var sex = localStorage.getItem('sex');
    if (sex) {
      $('input[name="sex"][value="'+sex+'"]').attr('checked', true);
    }

    // 监听表单提交事件
    form.on('submit', function(data){
      // 将表单数据保存到本地存储中
      localStorage.setItem('sex', data.field.sex);
      
      // 提交表单
      return true;
    });
  });
</script>

在 JavaScript 代码中，我们使用 localStorage 来保存表单数据，并在页面加载时通过 JavaScript 代码来实现回显功能。当表单提交时，将表单数据保存到本地存储中。这样，下次打开页面时，就可以自动回显之前保存的表单数据。