[layUI] table的合计功能,并取整数

代码points:

 

效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在layui-table中实现合计行,可以按照以下步骤进行操作: 1. 在HTML中创建一个空的table元素,如下所示: ```html <table id="dynamicTable" lay-filter="dynamicTable"></table> ``` 2. 在JavaScript中,使用layuitable模块初始化表格,并设置表头数据和数据: ```javascript layui.use('table', function(){ var table = layui.table; // 设置表头数据 var cols = [ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} // 添加更多字段... ]; // 设置数据 var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 25}, {id: 3, name: '王五', age: 30} // 添加更多数据... ]; // 渲染表格 table.render({ elem: '#dynamicTable', cols: [cols], data: data }); }); ``` 3. 添加合计行的处理逻辑: ```javascript layui.use('table', function(){ var table = layui.table; // 设置表头数据 var cols = [ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} // 添加更多字段... ]; // 设置数据 var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 25}, {id: 3, name: '王五', age: 30} // 添加更多数据... ]; // 渲染表格 table.render({ elem: '#dynamicTable', cols: [cols], data: data, done: function(res, curr, count){ // 计算合计数据 var totalAge = 0; for(var i = 0; i < res.data.length; i++){ totalAge += res.data[i].age; } // 创建合计行的HTML var totalHtml = '<tr><td colspan="' + cols.length + '">合计:年龄总和为' + totalAge + '</td></tr>'; // 添加合计行 $('#dynamicTable').next('.layui-table-view').find('tbody').append(totalHtml); } }); }); ``` 通过以上步骤,你可以在layui-table中实现合计行。在`done`回调函数中,可以计算需要合计的数据,并创建合计行的HTML,然后将其添加到表格中。注意要根据实际情况调整合计行的内容和样式。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值