2022-03-30 工作记录--LayUI-更新表单数据

LayUI-更新表单数据

一、案例一 👇👇

最近在LayUI项目中，在JS代码里修改了select表单的value值，但是发现该select表单并未显示选中值；
经过公司滴优秀滴哥哥的提醒，才发现需要进行select表单数据更新，即form.render()。

总结：LayUI里面只要修改了select表单的value值，就要记得form.render()一下哟~

对应代码

layui.use('form',function() { // 记得要写在layui.use('form',function() { })里面哟
	var form = layui.form

	$('select[name="classtype"]').val('2'); // 修改name为classtype的select表单的value值
	form.render(); // 更新select表单数据
})

二、案例二 👇👇

最近又遇到一个项目：在LayUI里面，通过template.js（模块引擎）动态渲染表单数据。但是表单并没有渲染出来~
再次在公司滴优秀滴哥哥的提醒下，发现：动态渲染的表单元素也要调用form.render()

1、代码如下：

HTML

对应代码：

<form class="layui-form">

  <div class="layui-input-block config_type">

    <script type="text/html" id="script">
      <select id="type" name="type" lay-filter="type">
        <option value="">签到类型</option>
        <!-- each表示遍历 -->
        {{ each config }}
        <option value="{{ $value.id }}">{{ $value.title }}</option>
        {{ /each }}
      </select>
    </script>

  </div>

  <div class="layui-input-block">
    <input type="text" id="date" name="date" class="layui-input" autocomplete="off">
  </div>

</form>

JS

对应代码：

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/share/js/template.js"></script>

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

   var html = template('script', res);
   $('.config_type').empty().append(html); // 注意：要先清空再赋值哟

   form.render(); // 动态渲染select表单数据，也要form.render()
})

2、后台返的数据：

三、最后附上官方介绍，如下图：