layui 表格内容写temple函数_layui表格-template模板的三种用法

问题情境：

layui中将数据库数据通过layui table渲染到前端表格，非常简单，但是如果数据库存储的信息不能被直接展示，项目中该页面有好几个这样的字段，会员类型，支付类型，会员时长还有平台类型；例如数据库有一个类型字段：1和2,1表示钻石会员，2表示至尊会员，前端显然不能直接显示1和2，而是应该根据后端返回的数字进行判断，展示相应的内容。layui table的自定义模板功能能非常方便地解决这个问题；

方法一：函数转义

所谓函数转义，就是在表格cols的对应列中直接写一段函数：

{ field: 'vip_type', title: '会员类型' , templet: function(d) {if(d.vip_type == 1){

res= "钻石会员"}else{

res= "至尊会员"}returnres;

}

这样的写法，简单直接，缺点是复用性差，有可能导致代码冗余。

方法二：绑定模板选择器

下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据。

{{# } else{ }}

至尊会员

{{# } }}

table.render中的对应列templet内容中直接引用上面的模板即可

{

field:'vip_type',

title:'会员类型',

templet:'#typeTpl'}

这样的话，如果有多处表格使用同一个模板，代码复用性将得到加强。

方法三：直接赋值模版字符

templet: '

'注意：这里一定要被一层

write by:tuantuan

layui 表格内容写temple函数_layui表格-template模板的三种用法相关推荐

layui 表格内容写temple函数_layui 表格内容显示更改
在cole 中使用temple 属性进行修改例: table.render({ elem: '#messageTable' ,id: 'search_table_mId' ,height: 500 ...
layui 表格内容写temple函数_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
layui导入模板数据_layui表格-template模板的三种用法
问题情境: layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,支付类型,会员时长还有平台类型 ...
java this()函数_java中this关键字的三种用法
this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this的用法在java中大体可以分为3种: 1.普通的直接引用,this相当于是指向当前对象本身. 2.形参与成员名字重 ...
OpenCV函数应用：基于二值图像的三种孔洞填充方法记录（附python，C++代码）
系列文章目录函数系列: OpenCV函数简记_第一章数字图像的基本概念(邻域,连通,色彩空间) OpenCV函数简记_第二章数字图像的基本操作(图像读写,图像像素获取,图像ROI获取,图像混合,图形 ...
C++容器的insert()函数有以下三种用法: 最终*it=val;
C++容器的insert()函数有以下三种用法: 最终*it=val; //用法1:在指定位置it前"插入"值为val的元素,返回指向这个元素的迭代器, iterator inse ...
Python扩展库numpy中where()函数的三种用法
第一种用法:只给where()函数传递一个数组作为参数,返回其中非0元素的下标. 第二种用法:给where()函数传递一个包含True/False值的数组,返回该数组中True值的下标,结合numpy ...
layui 数据表格内容过长遮挡_word表格技巧：遇到这三种情况，你会处理么？
编按:工作中,除了文字排版,表格应该是排版中比较麻烦的一类.因为各种文档的格式不同,表格也需要随机应变.因此,在排版的过程中,难免会遇到一些表格问题,今天小编总结了3个表格排版常见问题,快来看看吧,希 ...
c语言函数大全表格形式,C语言函数大全[表格形式].doc
C语言函数大全[表格形式].doc 目录 1．字符函数,所在函数库为ctype.h--------------------------2 2．数学函数,所在函数库为math.h.stdlib.h.s ...

layui 表格内容写temple函数_layui表格-template模板的三种用法

layui 表格内容写temple函数_layui表格-template模板的三种用法相关推荐

最新文章

热门文章