layui的totalRow默认为两位小数，按需要修改为整数

最新推荐文章于 2023-11-12 22:16:19 发布

学吧太深了

最新推荐文章于 2023-11-12 22:16:19 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端相关文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_38152400/article/details/112242097

前端相关专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在layui表格插件中自定义总计行的显示方式，通过添加totalRowType属性来控制数值的小数位数，实现整数或保留两位小数的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中只引用了layui的js。

<script src="../static/layui/layui.js" charset="utf-8"></script>

需要修改静态资源 …\resources\static\layui\lay\modules\table.js 里面的数据。

1.定位到table.js文件的 i.eachCols 位置：
在这里插入图片描述
2.修改 d=function的方法：
3.具体内容：

d=function(){var e=o.totalRowText || "",type=o.totalRowType || "",i,a={};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}

4.说明：

4.1.添加了 totalRowType 这个自定义属性，作为判断是否需要修改为整数显示。

4.2.通过 if 判断，如果是，通过 toFixed(0) 方法实现；否则为 toFixed(2) 。

5.使用：

table.render({
    elem: '#test'
    ,url:'/zjjgxy/getZjjgxyCountData'
    ,toolbar: '#toolbarDemo' //开启头部工具栏
    ,defaultToolbar: ['exports']
    ,title: '资金监管统计'
    ,totalRow: true
    ,cols: [
        [
            {field:'bldw', title:'办理单位', width:100, totalRowText: '合计'}
            ,{field:'jgyh', title:'监管银行', width:100}
            ,{field:'jgsl', title:'监管数量', width:100, totalRow: true, totalRowType:'int'}
            ,{field:'jzmj', title:'建筑面积', width:100, totalRow: true}
            ,{field:'fx', title:'付息', width:100, totalRow: true}
        ]
    ]
    ,page: true
});

6.效果：
在这里插入图片描述