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);}

layui 模板引擎使用相关推荐

LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
html 开发中遇到的问题，ajax异步传输，layui模板引擎并重新渲染
1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件 html A页面跳转到B页面,并传参.取值 layui模板引擎,渲染样式 Ajax 异步传输数据,动态更新内容绑定点击事件 < ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
layui模板引擎做动态增加和减少表单
效果显示目录结构代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
layui模板引擎laytpl判断为null或为空
<script type="text/html" id="stu_nameTpl">{{# if(d.stu_name==null || d.stu ...
layui模板引擎的使用
1,自定义数据 //发送请求$.ajax({type: "GET", dataType:'json',url: "http://merchant.shys-suda.co ...
Enjoy模板里使用layui模板引擎laytpl
注:https://jfinal.com/share/1023
layui分页和模板引擎
模板引擎 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
Layui 数据表格toolbar中使用模板引擎templet，当前系统时间比较问题
在layui数据表格展现中,使用toolbar,由于权限的控制,需要使用templet模板引擎语法进行控制,控制逻辑为只有大于当前时间的记录才能撤销. 效果图如下:(当前时间为2018-06-06) ...
Layui框架的分页（laypage）和模板引擎（laytpl）的使用
需求:根据数据信息生成数据分页展示. (注:商品的评论列表,分页使用laypage,评论内容区块显示用laytpl) 思路:首先显示时,先请求数据,获取需要显示数据的总条数.在请求数据成功后,首先进行 ...

layui 模板引擎使用

layui 模板引擎使用相关推荐

最新文章

热门文章