layui.table之totalRow合计属性自定义格式解决方案


一、问题描述

在这里插入图片描述

如上图所示,在日常开发中,相信只要使用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", “”) 此代码将合计值强制替换了其小数点,哎…,人生么,皆是如此,或喜或悲,或真或假。

在码农的大道上,唯有自己强才是真正的强者,求人不如求己,静下心来,开始思考…



二、思路重现


  • 参照上述猿辈们的代码,陷入了沉思:
  1. 既然循环时可以拿到每一个合计值,那是否可以判断当前合计值对应的哪种类型呢(int/double)?
  2. 打开页面开发者模式(F12),发现每个合计值对应的class属性确实有一定的规律可循; 在这里插入图片描述
  3. 当前页面的class是不变的,如果只针对当前页面确实可以写死进行判断;
  4. 但对于一个合格的开发猿来说,万法讲究通用大道,由此此方法不想便可知:行不通
  5. 既已到山穷水尽的地步,那么…是时候了到了…改源码的时候了。

  • 终于还是对源码下了手:
  1. 虽说不到万不得已,不要动其根本,但一想到改源码,心里莫名一些紧张刺激之感油然而生;
  2. 遵循猿辈经验之谈,源码底层应该也是用了替换或者四舍五入进行数值转换;
  3. 果不出所料,通过层层查找,通过js的toFixed()方法<四舍五入方法>,终究还是被我找到了;
  4. js所在:layui.all.js ;version:2.5.6(版本不同或许存在差异,但整体大同小异);
  5. 由于源码都是经过压缩后的,这里如需提高观阅效果,请通过在线js格式化后在进行查看;
  6. 不过嘛,作为一个资深暖男程序猿,代码为大家准备好,如下:
    在这里插入图片描述
  7. 突然发现,这源码也不过如此么,哈哈哈~ 还难不倒老夫…
  8. 言归正传,源码底层通过循环获取到合计值,通过toFoxed(2)进行四舍五入,导致不论是(int/double)类型的都有小数点后两位;
  9. 哎,人生么,就是这般,何为难,何为易,自古万法相通,走着走着路就通了。
  10. 优雅得拿起手机,打开酷狗音乐,来一首,梁博的《出现又离开》,整理思绪,上方案



三、解决方案


  • 自定义属性: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
 }



~~   码上福利


大家好,我是猿医生:

在码农的大道上,唯有自己强才是真正的强者,求人不如求己,静下心来,扫码一起学习吧…
https://marketing.csdn.net/poster/145?utm_source=765669642

猜你喜欢

转载自blog.csdn.net/qq_42175986/article/details/111473134