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

项目中只引用了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.效果
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现分页需要用到layui中的table模块。具体实现步骤如下: 1. 在HTML页面中添加一个table容器,如下所示: ``` <table id="demo" lay-filter="test"></table> ``` 2. 在JS代码中引入layui模块,创建table实例,设置table参数,如下所示: ``` layui.use('table', function(){ var table = layui.table; //执行一个 table 实例 table.render({ elem: '#demo', url: '/demo/table/user/', //数据接口 page: true, //开启分页 cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}, {field: 'username', title: '用户名', width:120}, {field: 'sex', title: '性别', width:80, sort: true}, {field: 'city', title: '城市', width:100}, {field: 'sign', title: '签名', width: 200}, {field: 'experience', title: '积分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); }); ``` 其中,url为数据接口,需要根据实际情况进行替换。 3. 在分页组件的 jump 回调函数中,重新渲染数据列表,如下所示: ``` layui.use('table', function(){ var table = layui.table; //分页组件的 jump 回调函数 function jumpCallback(obj, first) { //重新渲染数据列表 table.reload('demo', { where: { //接口的其它参数 page: obj.curr, limit: obj.limit }, page: { curr: obj.curr //更新当前页码 } }); } }); ``` 其中,'demo'为table的lay-filter属性值,也就是table的ID,需要HTML页面中的ID一致。 4. 在数据接口中,根据分页参数进行数据的筛选和返回,如下所示: ``` var data = [ {id:1, username:'张三', sex:'男', city:'北京', sign:'我是一个好人', experience: '116', score: '67', classify: '作家', wealth: '9999999'}, {id:2, username:'李四', sex:'女', city:'上海', sign:'我是一个坏人', experience: '12', score: '21', classify: '诗人', wealth: '666'}, ... ]; app.get('/demo/table/user/', function(req, res){ var page = req.query.page || 1; var limit = req.query.limit || 10; var start = (page - 1) * limit; var end = start + limit; var result = { "code": 0, "msg": "", "count": data.length, "data": data.slice(start, end) } res.send(result); }); ``` 其中,data为模拟的数据,可以根据实际情况进行替换。需要根据分页参数计算出需要返回的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值