uso del motor de plantillas layui

<!-- 第一步------模板 -->
<script id="viewItem" type="text/html">
  {
    
    {
    
    #  layui.each(d.list, function(index, item){
    
     }}
      {
    
    {
    
    # if (item.type === 'radio' ) {
    
     }}
      <div class="layui-form-item">
        <label class="layui-form-label">{
    
    {
    
    item.name}}
          {
    
    {
    
    # if (item.rules) {
    
     }}
                 <span>*</span>
          {
    
    {
    
    #  } }}
        </label>
        <div class="layui-input-block">
          {
    
    {
    
    #  layui.each(item.options, function(i, n){
    
     }}
            <input type="radio" name="{
    
    {item.key}}" value="{
    
    {n}}" title="{
    
    {n}}" lay-verify="{
    
    {item.rules}}" />
          {
    
    {
    
    #  }); }}
        </div>
      </div>
      {
    
    {
    
    # } else  {
    
     }}
        <div class="layui-form-item">
          <label class="layui-form-label">{
    
    {
    
    item.name}}
            {
    
    {
    
    # if (item.rules ) {
    
     }}
                 <span>*</span>
            {
    
    {
    
    #  } }}
          </label>   
          <div class="layui-input-block">
            <input class="layui-input" maxlength="9" name="{
    
    {item.key}}" placeholder="请输入{
    
    {item.name}}" type="text" lay-verify="{
    
    {item.rules}}"/>//lay-verify 是否校验
          </div>
        </div>
      {
    
    {
    
    #  } }} 
  {
    
    {
    
    #  }); }}
</script>

<!-- 新增表单 -->
<script type="text/html" id="villOrg_add_form">
  <form class="layui-form layui-form-pane econom_add_form">
	<!-- 第二步---- 模板引擎--插入地方 -->
    <div id="view-add"></div>
    
    <!-- 按钮 -->
    <div class="layui-form-item model-form-footer" style="text-align: center;">
      <button class="layui-btn" lay-filter="villOrg_add_form-submit" lay-submit>保存</button>
      <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type='button'>取消</button>
    </div>
  </form>
</script>
const formList = {
    
     //数据 新增和编辑常用
    "title": "测试",
    "list": [
      {
    
     name: "测试人数", key: "villageCadreNum", rules: 'required|integer' },//校验规则
      {
    
     name: "测试(男)人数", key: "femaleVillageOfficer", rules: 'required|integer' },
      {
    
     name: "受教育程度", key: "partyEducation", type: 'radio', options: ['未上过学', '小学', '初中', '高中或中专', '大专及以上'], rules: "" },//不校验
      {
    
     name: "测试(女)人数", key: "partyAge", rules: '' },
      {
    
     name: "测试组长", key: "collegeDegreeAbove", type: 'radio', options: ['是', '否'], rules: "otherReq" },
      {
    
     name: "测试组长受教育程度", type: 'radio', options: ['未上过学', '小学', '初中', '高中或中专', '大专及以上'], rules: "", key: "villageCommitteeEducationLevel" },
      {
    
     name: "测试全年劳动报酬(元)", key: "villageCommitteeLaborCompensation", rules: '' },
      {
    
     name: "测试大会召开次数", key: "villageHoldingTimes", rules: 'required|integer' }
    ]
  };  // form 数据


//调方法
showEcoAddForm()



// 显示新增表单
  function showEcoAddForm() {
    
    
    // 加载图标
    let loading = layer.load(2);
    // 配置新增表单---使用layui---弹出层
    let ecoAddForm = layer.open({
    
    
      type: 1,
      title: "添加测试新增",
      content: $("#villOrg_add_form").html(),
      area: ['100%', '100%'],
      fix: true,
      success: function () {
    
    
  
        //  关闭加载图标
        layer.close(loading);
        //  提交表单
        addEcoSubmit();
        // 第三步----------渲染模板
        const getTpl = document.getElementById('viewItem').innerHTML
          , view = document.getElementById('view-add');
        laytpl(getTpl).render(formList, function (html) {
    
    
          view.innerHTML = html;
        });
        form.render();//layui form表单渲染
      },
      end: function () {
    
    
        console.log('加载失败')
      }
    });
    // 全屏
    layer.full(ecoAddForm);
  }

Supongo que te gusta

Origin blog.csdn.net/weixin_45108907/article/details/113631330
Recomendado
Clasificación