LayUI⑷：模板语法

　　打算快快使用LayUI开发一个程序熟悉一下LayUI，后面的开发使用Element+Vue。

　　使用LayUI+PHP开发了一个资产清查的小程序，大概1个星期，还可以，主要是LayUI功能完备、使用方便。

　　经过一段时间使用后，发现LayUI真的很好，对付一些中小型程序的确是方便快速。这有点像被淘汰的PowerBuilder，功能强大，对开发者做到足够的友好。

　　今天用到表格里的字段显示，就是视图与数据的关系，数据是可以有多种样式的，类似于PowerBuilder的数据窗口中样式多样化，数据库也是一样的，数据表与视图。

　　LayUI也使用模板语法即可完成。

　　比如c06字段是编码字段，数据类似于01、02、03、04......，想让它显示不同的结果，可以这样来写：

<script type="text/html" id="convertType1">{{#       if(d.c06=='01'){         }}<div>经理党委办公室</div>{{#       }     }}{{#       if(d.c06=='04'){         }}<div>财务科</div>{{#       }     }}{{#       if(d.c06=='03'){         }}<div>人事（组织）科</div>{{#       }     }}
</script>

　　表格中，添加引用：

        table.render({elem: '#currentTableId',url: 'ZTBUser.php',method:'POST',where:{"OP":"列表"},          toolbar: '#toolbarDemo',defaultToolbar: ['exports'],cols: [[{type: "checkbox", width: 40},{field: 'c01', width: 160, title: '数据库ID', sort: true},{field: 'c02', width: 120, title: '用户名'},{field: 'c03', width: 120, title: '密码'},{field: 'c04', width: 120, title: '类型'},{field: 'c05', width: 160, title: '单位名'},{field: 'c06', width: 400, title: '编码',align:'left',templet:'#convertType1' }, //引用            {field: 'c07', width: 120, title: '岗位'},{field: 'c08', width: 160, title: '邮件帐号'},              {title: '操作',width: 150, toolbar: '#currentTableBar', align: "center"}]],limits: [5,10],limit: 15,page: true,skin: 'line',done: function (res, curr, count) {//渲染//setTimeout(function(){   element.render(); },1000);              $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');}                      });

　　这么写有点别扭，可以替换为：

<script type="text/html" id="convertType1">{{#    if(d.c06=='01'){   return '<div>经理党委办公室</div>'   }   }}{{#    if(d.c06=='03'){   return '<div>人事（组织）科</div>' }   }}{{#    if(d.c06=='04'){   return '<div>财务科</div>'   }   }}
</script>

　　更进一步，这里返回的HTML元素（可以包涵样式），可以替换为：

<script type="text/html" id="convertType3">{{#    if(d.c05=='经理（党委）办公室'){  return "<div class='layui-input-inline'><input type='text' name='Dc02' id='Dc02'  lay-verify='required' lay-reqtext='用户名称不能为空'  value='' class='layui-input'></div>";   }   }}{{#    if(d.c05=='人事（组织）科'){    return "<div class='layui-input-inline'><select lay-filter='C26_List' id='C26' name='C26'><option value='' >请选择状态</option><option value='计算机'>计算机</option><option value='打印机'>打印机</option><option value='网络设备'>网络设备</option><option value='自动化设备'>自动化设备</option><option value='其他设备'>其他设备</option></select></div>"; }   }}{{#    if(d.c05=='财务科'){  return "<div class='layui-input-inline' id='UserType'><input type='radio' name='Dc04' value='管理员' title='管理员' ><input type='radio' name='Dc04' value='文件审核' title='文件审核' checked='true'><input type='radio' name='Dc04' value='普通用户' title='普通用户'></div>"; }   }}{{#    if(d.c05=='计划经营科'){    return "<div class='layui-input-inline'><input type='checkbox' id='EC08' lay-skin='primary' ></div>";   }   }}      {{#    if(d.c05=='生产科'){    return "<div class='layui-form-item'><div class='layui-input-block'><div id='EC11'></div></div></div>";  }   }}
</script>

　　这样根据同一行中不同的数据，编码字段就显示不同的HTML元素，有下拉框、输入框、单选框等等，可以有很多种选择去实现不一样的想法。

　　很多开发工具的原理、功能以及使用方式都有相近之处，基于用户（开发者）友好体验的好想法肯定是被继承的，随着技术的发展通过重构和迭代有了更丰富和完整的实现。这很大程序上降低了我们的学习成本，可以很快地上手。

　　当然，可以实现表格的在线编辑了，这个我还没有去试验，应该是可以的。

　　模板语法还有很多其他的用处，后面再更新。

　　①　2022年3月26日

LayUI⑷：模板语法相关推荐

LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
Vue的模板语法学习
模板语法 1.插值 a.文本数据绑定最常见的形式就是使用 "Mustache" 语法(双大括号)的文本插值我们在普通插值的时候无论何时,绑定的数据对象上 msg 属性发生了改变 ...
Django 的模板语法之过滤器
后端朝前端页面传递数据的方式# 第一种return render(request,'index.html',{'n':n})# 第二种return render(request,'index.html ...
django之模板语法
1. 变量 Django 模板中遍历复杂数据结构的关键是句点字符句点符 views.py def index(request):'''模板语法:渲染变量 -> {{}}1. 深度查询,用的句点 ...
angular2的模板语法
Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经 ...
Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
4.Vue 模板语法
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. Vue模板语法这篇文章我们来 ...
Django从理论到实战(part19)--DTL模板语法
学习笔记,仅供参考参考自:Django打造大型企业官网–Huang Y:官方文档本系列Blog以应用为主,理论基础部分我在后端专栏的Django系列博客已经写过了,如果有些需要补充的知识点,我会在 ...
vue加载时闪现模板语法-处理方法
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等解决办法: 1.可以通过VUE内置的指令v-cloak解决这个问题(推荐) 具体实现: <ul v-clo ...
Django07:模板语法/标签/inclusion_tag/模版的继承
模板语法传值列表:l=['a','b','c'] 集合:se{'a','yy','ss'} 元组:t=(111,222,333) render(request.'index,html',locals ...

LayUI⑷：模板语法

LayUI⑷：模板语法相关推荐

最新文章

热门文章