templet的多种运用(1)
templet的多种运用(1)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015、 templet
作者： 梁柏源
撰写时间：2019/07/24
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
layui相信给为即将面临秃顶的小伙伴们都不陌生，个人感觉layui中比较好用的模块就是layuiTable这个layui表格模块，听起来很绕口，没办法为了凑字数，大家体谅一下。
在layuiTable中templet的功能挺不错的，它就是我们今天的主角——templet，当然介绍什么的知道的就可以跳过这样一段，毕竟在贤心的layui文档里面有说明，当然如果你懒得去看layui文档就继续往下看吧。以下这段引用于layui文档：templet是属于一种String类型；说明：自定义列模板（自定义就是想干嘛就干嘛的意思，可惜了这里不行(；′⌒`)，往后看），模板遵循laytpl语法（没错就是他(▼へ▼メ)）。这是一个非常实用的功能（没错，亲身体验过（￣︶￣），的确很实用），你可以借助它实现逻辑处理，以及将原始数据转化成其他格式，如时间戳转化为日期字符等（我之前的时间格式的其中一篇就用到它哦！(￣▽￣)~*）。
在layui中有三中方式选择（字符量大的、适中的、小的）：
方法一：绑定模板选择器。（这种本人目前（大概）比较常用）
懂这小标题的意思不？就是在我们的table表格里使用。还是不懂的话，举个栗子：
table.render{
cols:[[
{ field: ‘ABC’, title: ‘标题’, templet: ‘这里面是个自定义ID’}//这里的templet值是模板元素的选择器，模板选择器、模板选择器、模板选择器，重要的事情说三遍
]]
}
当然，templet是可以在大多数（并不清楚，所以用大多数来表示）table中可以使用，还是举个栗子：
清俗易懂，是不是。
方法二：函数转义
直接代码吧：
table.render({
cols: [[
{field:'title', title: '标题', templet: function(d){
return 'ID：'+ d.id +'，标题：'+ d.title +''
}
}
,{field:'id', title:'ID', width:100}
]]
});
时间不多让我们快速过一遍，就进入今天的正题。
方法三：直接赋值模板字符。（事实上，templet也可以直接是一段html内容，貌似用过）
templet: '
'注意：这里一定要被一层 包裹，否则无法读取到模板
好了，有什么不理解的可以去看layui官方文档。现在直接进入正题：
这次用的是方式一绑定模板选择器：
代码呈上，请享用：
Salessummary = layuiTable.render({
elem: "#Salessummary",//html表格id
height: 215,
totalRow: true,
url: "",//数据接口
cols: [[ //表头
{ type: 'radio', hide: true },
{ type: 'numbers', title: '', rowspan: 2, totalRowText: "合计" },//序号列，title设定标题名称
{ field: 'CommodityID', title: 'CommodityID', hide: true, rowspan: 2 },//hide:true 隐藏列
{ field: 'xy', title: '项目', align: 'left', rowspan: 2 },
{ align: 'center', title: '销售汇总', colspan: 5 }], [
{ field: 'Amount', title: '销售数', align: 'right', totalRow: true },
{ field: 'Receipts', title: '实收金额', align: 'right', totalRow: true, templet: ReceiptMoney },
{ field: 'CostPrice', title: '成本金额', align: 'right', totalRow: true, templet: CostPriceMoney },
{ field: 'Grossmargin', title: '毛利金额', align: 'right', totalRow: true, templet: Modss },
{ field: 'GrossProfitRate', title: '毛利率', align: 'center', width: 76, templet: guise }
]],
data: [],//加载本地数据
//toolbar: '#tabMarketDetailToolbar',
done: function (res, curr, count) {
$('layui-table[lay-even] tr:nth-child(even)').css({ 'background-color': '#c3cedd' });
$('th').css({ 'background-color': '#bdccea', 'color': 'black', 'font-weight': '500', 'font-size': '12px', 'line-height': '10px' });
}
});
这是表格，注意看毛利金额，毛利率，因为截图的原因，又懒得再截就写出这两个。
//毛利金额的
function guise(data) {
var GrossProfitRate = data.GrossProfitRate;
var btn = "";
if (data.GrossProfitRate <= 0) {
btn += '' + '0.00' + '%' + '';
} else {
btn += '' + data.GrossProfitRate + '%' + '';
}
return btn;
}
//毛利率的
function Modss(data) {
var Grossmargin = data.Grossmargin;
var btn = "";
if (data.Grossmargin <= 0) {
btn += '' + '¥' + data.Grossmargin + ' ';
} else {
btn += '' + '¥' + data.Grossmargin + '';
}
return btn;
}
效果图：
