一、问题描述
如上图所示,在日常开发中,相信只要使用layui.table数据表格来渲染列表,或多或少会使用到其合计属性(totalRow)…
但这时就会有个让人头疼的问题,使用totalRow属性展示的数据是默认带有两位小数的,即使合计结果为整数,也会自带(.00)结尾…
作为一个合格的开发猿来说,首先想到查阅下layui官方文档…
从打开官方文档到浏览其内容,由一丝期待逐渐流露出失落的神情,哎…人生么,就是这样,期望越大失望亦越大…
既然从官方大大没找到答案,那就只能寻找各位猿前辈们的典藏真迹了,满怀白嫖心情在网上翻阅着各种猿辈资料笔记…
终于,皇天不负有心人,还真找到了一种解决方案,代码如下:
done: function () {
var divArr = $(".layui-table-total div.layui-table-cell");
$.each(divArr, function (index, item) {
var divHtml = $(item);
var content = divHtml.html();
content = content.replace(".00", "");
divHtml.html(content);
});
}
此时的copy大法才真正的展示出其全部的实力,重启项目,清空缓存,刷新页面,果不其然,奏效了…
嘴角若隐若现一丝弧度微起,说时迟,那时快,突然眉头紧锁,一口凉气倒吸,订单金额该有的小数点后两位却没有了…
不知过了许久…一口叹气声,打破了空气中凝固的气氛,仔细斟酌猿辈们的代码,发现其问题所在;
content.replace(".00", “”) 此代码将合计值强制替换了其小数点,哎…,人生么,皆是如此,或喜或悲,或真或假。
在码农的大道上,唯有自己强才是真正的强者,求人不如求己,静下心来,开始思考…
二、思路重现
- 参照上述猿辈们的代码,陷入了沉思:
- 既然循环时可以拿到每一个合计值,那是否可以判断当前合计值对应的哪种类型呢(int/double)?
- 打开页面开发者模式(F12),发现每个合计值对应的class属性确实有一定的规律可循;
- 当前页面的class是不变的,如果只针对当前页面确实可以写死进行判断;
- 但对于一个合格的开发猿来说,万法讲究通用大道,由此此方法不想便可知:行不通;
- 既已到山穷水尽的地步,那么…是时候了到了…改源码的时候了。
- 终于还是对源码下了手:
- 虽说不到万不得已,不要动其根本,但一想到改源码,心里莫名一些紧张刺激之感油然而生;
- 遵循猿辈经验之谈,源码底层应该也是用了替换或者四舍五入进行数值转换;
- 果不出所料,通过层层查找,通过js的toFixed()方法<四舍五入方法>,终究还是被我找到了;
- js所在:layui.all.js ;version:2.5.6(版本不同或许存在差异,但整体大同小异);
- 由于源码都是经过压缩后的,这里如需提高观阅效果,请通过在线js格式化后在进行查看;
- 不过嘛,作为一个资深暖男程序猿,代码为大家准备好,如下:
- 突然发现,这源码也不过如此么,哈哈哈~ 还难不倒老夫…
- 言归正传,源码底层通过循环获取到合计值,通过toFoxed(2)进行四舍五入,导致不论是(int/double)类型的都有小数点后两位;
- 哎,人生么,就是这般,何为难,何为易,自古万法相通,走着走着路就通了。
- 优雅得拿起手机,打开酷狗音乐,来一首,梁博的《出现又离开》,整理思绪,上方案 …
三、解决方案
-
自定义属性:totalRowType(int 代表无需四舍五入,保持本身整数即可)
-
修改源码,循环时通过自定义类型,来判断是否四舍五入
i.eachCols(function (e, o) {
// 看到这里,觉得有那味儿的,给个三连吧(点赞、收藏、关注),谢谢屏幕前的你~
var r = o.field || e, d = function () {
var e = o.totalRowText || "", a = {
}, i, type = o.totalRowType || "";
if (type === "int") {
i = parseFloat(l[r]).toFixed(0)
} else {
i = parseFloat(l[r]).toFixed(2)
}
return a[r] = i, i = u(o, i, a), t ? t[o.field] || e : o.totalRow ? i || e : e
}
~~ 码上福利
大家好,我是猿医生:
在码农的大道上,唯有自己强才是真正的强者,求人不如求己,静下心来,扫码一起学习吧…