layui 表单重新渲染

在使用 layui 表单时，如果需要重新渲染表单，可以使用 `form.render()` 方法。这个方法可以在表单元素有变动时重新渲染表单，比如新增表单元素、删除表单元素、修改表单元素等情况。使用方式如下：

layui.use('form', function(){
  var form = layui.form;

  // 进行表单渲染
  form.render();

  // 监听表单元素变化，重新渲染表单
  form.on('select(filter)', function(data){
    // 其他操作
    form.render('select');
  });
});

其中，`render()` 方法可以不带参数，表示重新渲染所有表单元素；也可以带参数，表示只重新渲染特定的表单元素。在上面的代码中，`render('select')` 表示只重新渲染 select 类型的表单元素。

相关问题

layui清空表单重新渲染

在 layui 中，你可以使用 `form.render()` 方法来重新渲染表单，以达到清空表单并重新加载的效果。下面是一个示例代码：

layui.use(['form'], function() {
  var form = layui.form;

  // 清空表单并重新渲染
  function clearAndRenderForm() {
    var formId = 'yourFormId'; // 替换为你的表单 ID
    form.val(formId, {});
    form.render(null, formId);
  }

  // 在某个事件触发时调用清空表单函数
  // 例如点击一个按钮时
  $('#clearBtn').on('click', function() {
    clearAndRenderForm();
  });

});

在这个示例中，我们首先引入 layui 的 form 模块。然后定义了一个清空表单并重新渲染的函数 `clearAndRenderForm()`，其中 `formId` 是你要清空的表单的 ID。

在清空表单函数中，我们使用 `form.val()` 方法将表单的值设置为空对象 `{}`，以达到清空表单的目的。然后使用 `form.render(null, formId)` 方法重新渲染表单，其中 `null` 表示全局刷新，`formId` 是需要重新渲染的表单 ID。

最后，在某个事件触发时，比如点击一个按钮时，调用 `clearAndRenderForm()` 函数即可清空表单并重新渲染。

请确保在正确引入 layui 和给表单元素设置了正确的 ID，并将示例代码中的 `'yourFormId'` 替换为你的表单 ID。

Layui 表单数据渲染

Layui 表单数据渲染可以使用 layui.form 的 render 方法，该方法支持以下参数：

- elem: 指定渲染的表单元素，可以是 DOM 对象，也可以是 CSS 选择器。
- data: 指定渲染的数据，可以是 JSON 对象或数组。
- filter: 指定表单的过滤器，用于监听表单元素的变化。

示例代码如下：

HTML 代码：

<form class="layui-form" lay-filter="example-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" 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-block">
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="example">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

JavaScript 代码：

var data = {
  username: '张三',
  password: '123456'
};

layui.use(['form'], function () {
  var form = layui.form;

  // 渲染表单数据
  form.render(null, 'example-form');

  // 监听表单提交事件
  form.on('submit(example)', function (data) {
    console.log(data.field);
    return false;
  });
});

在以上代码中，我们首先定义了一个 JSON 对象 data，其中包含了用户名和密码的值。然后使用 layui.form 的 render 方法渲染表单数据，其中 elem 参数指定渲染的表单元素为 example-form，也就是我们定义的表单元素的 lay-filter 属性值。最后，使用 form.on 监听表单的提交事件，当用户点击提交按钮时，输出表单的数据。