layui根据条件显示列_templet渲染layui表格数据的三种方式

layui前端框架是我一直在使用，也很好用。

今天记录一下，templet渲染layui表格数据的三种方式。

第一种：直接渲染(对于表格数据样式要求不高)

直接在动态表格字段声明，添加templet属性，在其后面加上简单html代码。({{d.name}}这个是layui内置的模板输出){ field: 'name',width: 180,align:"center",title: '用户名',

templet:"

"}},

第二种：先处理数据再显示(适用于数据进一步优化)

在script声明函数，例如下面：将时间戳数据(10位数)改为时间格式function formatDate(timestamp) {

var now = new Date(timestamp*1000);

var year=now.getFullYear();

var month=now.getMonth()+1;

var date=now.getDate();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;

}

在添加上面执行代码，如下：{ field: 'time',width: 180,align:"center",title: '访问时间',

templet: function (d){

return formatDate(d.time);

}},

最终显示：2019-8-5 18:3:3

第三种：使用layui内置数据模板(适合精美的样式)

直接在动态表格字段声明，添加templet属性，并设置值为要访问script标签的ID{ field: 'status', title: '是否开启',templet: '#statusFun' },

上面那个'#statusFun'，链接的是下面代码：

{{# if(d.status == 1){ }}

开启

{{# } else { }}

开启

{{# } }}

layui根据条件显示列_templet渲染layui表格数据的三种方式相关推荐

layui 表格内容写temple函数_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
layui根据条件显示列_layui按条件隐藏表格列的实例
我就废话不多说了,直接上关键代码吧!给大家做个参考 layui.use(['table','form','laypage'], function() { var table = layui.table ...
【Matlab系列】MATLAB中显示输出数据的四种方式
DATE: 2019-11-13 1.参考 MATLAB 显示输出数据的三种方式 Matlab之print,fprint,fscanf,disp函数 2.改变数据格式当数据重复再命令行窗口时,整数以 ...
【MySQL】MySQL 使用where条件的三种方式
1.概述一般MySQL能够使用如下三种方式应用WHERE条件,从好到坏依次为: 在索引中使用WHERE条件来过滤不匹配的记录.这是在存储引擎层完成的. 使用索引覆盖扫描(在Extra列中出现了Usi ...
uni-app的渲染数据和三种调接口的方法
渲染数据代码示例: <template><view class="content"><view class="page-section in ...
Html img显示图片的三种方式
1.显示本地图片 2.显示网络上的图片,不过网络上的图片就是需要每次都去加载,可能会费流量 3.下面这种就是我们今天所要讲的第三种方式显示图片,它其实也就是根据http网络上的图片通过利用Data U ...
1. 变量提升 2. 条件语句 3. 循环语句弹出框的三种形式 If条件的种类...
1. 变量提升变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window ,window分两个模块,一个叫内存模块,一个叫运行模块,内存模块找到当前作用域下的 ...
excel找到对应数据的列指标_三种方式制作数据地图
数据地图,因为地理信息的加持,信息丰富,直观明显,广泛地应用于多个行业,数据分析必备利器. 方式一:通过Excel制作数据地图本文大篇幅在介绍这种方式的具体操作方法,共分为四个步骤.概括来说其主要通 ...
取出Cookie中的中文显示乱码解决方法。经验证第三种方法有效。
取出Cookie中的中文显示乱码解决方法 HttpUtility.UrlEncode(Response.Cookies[ "newcookie "].Values); HttpU ...

layui根据条件显示列_templet渲染layui表格数据的三种方式

layui根据条件显示列_templet渲染layui表格数据的三种方式相关推荐

最新文章

热门文章