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中可以使用，还是举个栗子：

<th lay-data="{field:'title', templet: '#titleTpl'}">标题</th>

清俗易懂，是不是。

       方法二：函数转义

直接代码吧：

table.render({

cols: [[

{field:'title', title: '标题', templet: function(d){

return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'

}

}

,{field:'id', title:'ID', width:100}

]]

});

时间不多让我们快速过一遍，就进入今天的正题。

方法三：直接赋值模板字符。（事实上，templet也可以直接是一段html内容，貌似用过）

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'

注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

好了，有什么不理解的可以去看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 += '<span style="color:red">' + '0.00' + '%' + '</span>';

            } else {

                btn += '<span>' + data.GrossProfitRate + '%' + '</span>';

            }          

            return btn;

        }

//毛利率的

function Modss(data) {

            var Grossmargin = data.Grossmargin;

            var btn = "";

            if (data.Grossmargin <= 0) {

                btn += '<span style="color:red">' + '¥' + data.Grossmargin + ' </span>';

            } else {

                btn += '<span>' + '¥' + data.Grossmargin + '</span>';

            }

            return btn;

        }

效果图：