template的使用笔记

渲染模板  使用最流行的template.js

首先先引入template和jquery的 js

  <script src="/assets/lib/jquery.js"></script>
  <script src="/assets/lib/template-web.js"></script>

再定义scropt模板  type类型为 ‘text/html’ 再设置一个id为“dialog-eit”

  <script type="text/html" id="dialog-eit">
    <form class="layui-form" id="form-eit" lay-filter="form-eit">
      <input type="hidden" name="Id" />
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            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="text"
            name="alias"
            required
            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="formDemo">
            确认修改
          </button>
        </div>
      </div>
    </form>
  </script>

数据的赋值 通过调用template函数 参数一填写模板的id  参数二填写数据

获取到处理好的htmlStr后，在通过jquery渲染到页面上

      let htmlStr = template("tpl-table", res);
      $(".layui-table tbody").empty().html(htmlStr);

【博学谷学习记录】超强总结，用心分享