layui 动态表格 templet模板函数

article/2025/8/27 6:26:18

1，需求说明

在这里插入图片描述
关于动态标题栏的相关知识跳转链接：layui 静态动态复杂多表头

2，尝试的用法

var chenbenkemuList=${chenbenkemuList};var columnAry=[]for (var i = 0; i < chenbenkemuList.length; i++) {var onechenbenkemu = chenbenkemuList[i];var widthnum=110;var label=onechenbenkemu.dic_name;var code=onechenbenkemu.item_code;label=label.length>10?label.substring(0,10):label;widthnum=label.length*16+20;widthnum=widthnum<110?110:widthnum;console.log(label+"::"+widthnum)columnAry.push({field: code, title: label, width: widthnum, align: 'right', halign: 'center',templet: function (row) {if (row.code == 0 || row.code == undefined || row.code == null) {return '0.00';} else {return formatCurrency(row.code);}}});}//货币格式化函数function formatCurrency(num) {num = num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num = "0";}sign = (num == (num = Math.abs(num)));//数字是否为正负数  Math.abs() 返回参数的绝对值num = Math.floor(num*100+0.50000000001);//返回小于等于num*100+0.50000000001的最大整数:cents = num%100; //小数位数num = Math.floor(num/100).toString();//整数位数if(cents<10){cents = "0" + cents;//小数位补0}for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++){// 货币，三位数字一间隔num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));}return (((sign)?'':'-') + num + '.' + cents);}

显示结果图：

虽然没有报错，但是数值全部为0，显然在 templet 中，程序并没有把 row 中的 code识别成一个变量，而是把 code 当成了 field 属性的数据

templet: function (row) {if (row.code == 0 || row.code == undefined || row.code == null) {return '0.00';} else {return formatCurrency(row.code);}}

在这里插入图片描述

3，选择器的使用

改进，使用选择器，代码如下

var chenbenkemuList=${chenbenkemuList};var columnAry=[]for (var i = 0; i < chenbenkemuList.length; i++) {var onechenbenkemu = chenbenkemuList[i];var widthnum=110;var label=onechenbenkemu.dic_name;var codeSelect="#"+onechenbenkemu.item_code;label=label.length>10?label.substring(0,10):label;widthnum=label.length*16+20;widthnum=widthnum<110?110:widthnum;console.log(label+"::"+widthnum)columnAry.push({field: onechenbenkemu.item_code, title: label, width: widthnum, align: 'right', halign: 'center',templet:codeSelect});}//货币格式化函数function formatCurrency(num) {num = num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num = "0";}sign = (num == (num = Math.abs(num)));//数字是否为正负数  Math.abs() 返回参数的绝对值num = Math.floor(num*100+0.50000000001);//返回小于等于num*100+0.50000000001的最大整数:cents = num%100; //小数位数num = Math.floor(num/100).toString();//整数位数if(cents<10){cents = "0" + cents;//小数位补0}for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++){// 货币，三位数字一间隔num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));}return (((sign)?'':'-') + num + '.' + cents);}//选择器处理的内容，这里的id就是上面的 codesSelect 的数据，动态列有7个，所以我也需要写7个<script type="text/html" id="codesSelect">{{#  if (d.field== 0 || d.field== undefined || d.field== null) { }}{{#     return '0.00';}}{{# } else {}}{{#     return formatCurrency(d.gdzczj);}}{{# }}}</script>//略。。。。。