实现基础的数据表格合计

环境： layui2.5.7。
首先展示一下官方文档说明

下面展示具体实现代码

最终实现模样

获取合计数据

数据合计完成后，有时后需要获取合计后的数据，但查看文档却不知道合计后的数据从哪里获得，怎么办？[・ヘ・?]

通过F12可以轻易的看见合计数据全部存储在<div class=""layui-table-total>里
如图(～￣▽￣)～

知道数据存放在哪里，获取数据就很好办了。
利用jQuery可以轻易获取数据
代码如下

//方法一
// 获取`class = "layui-table-total"`的后代中第7个`div` 元素的的内容
var data = $(".layui-table-total div:eq(6)").html();
layer.alert(JSON.stringify(data));方法二
// 获取`class = "layui-table-total"`的后代中`td` 元素中data-field=experience的内容
var data = $(".layui-table-total td[data-field=experience]").html();
layer.alert(JSON.stringify(data));

修改合计数据

合计后计算平均值

获取合计数据之后，修改数据就很简单了啦。(￣▽￣)~*
代码如下：

//获取合计数据
var data = $(".layui-table-total div:eq(6)").html();
//获取表长度
var trArr = $(".layui-table-body.layui-table-main tr").length;
layer.alert(JSON.stringify(data/trArr));

去除小数

有时候我们只需要整数，后面的小数看起来就不美观了，需要去除
利用JavaScript可以轻松分割修改
代码如下：

方法一
//获取合计数据
var data = $(".layui-table-total div:eq(6)").html();
// 进行剪切
data  = data.substr(0, data.indexOf("."));
//赋值修改
$(".layui-table-total div:eq(6)").html(data);方法二
//获取合计数据
var data = $(".layui-table-total div:eq(6)").html();
//赋值修改
$(".layui-table-total div:eq(6)").html(parseInt(data));

单纯去除小数有时也无法满足需求，有些数据需要四舍五入
代码如下：

//获取合计数据
var data = $(".layui-table-total div:eq(6)").html();
//将合计数据以小数点为界限分割成两份，array[0]为整数部分，array[0]为小数部分
var array = data.split(".");if(array[0].substr(0,1) > 4){//赋值修改$(".layui-table-total div:eq(6)").html(parseInt(array[0])+1); }else{//赋值修改$(".layui-table-total div:eq(6)").html(parseInt(array[0])); }

合计所有数据（有分页）

数据表格有在不少情况下是需要分页的，但是，Lay-ui自带的合计只能合计当前页面的数据总值，不能合计所有数据，当需要合计所有数据，就需要另写了(￣ー￣)

方法很笨，就是先获取所有数据，然后自己一个个加(/ω＼)
代码如下：

var Data;
var option = {//数据表格定义代码，省略部分data: ''
};
var URL= '/demo';   //填写接口
Load_Table(URL, option);
//异步接口加载表格
function Load_Table(URL, option) {$.ajax({url: URL,type: 'GET',async: true,success: function (res) {if (res.code === '200' || res.code === '2001') {Data = res.data;load_rows(Data, option);} else {layer.msg(res.msg);}},error: function f(res) {alert("请求失败！状态码：" + res.status);}})
}
//加载数据
function Load_Datas(Data, option) {var table = layui.tableoption['data'] = Data;table.render(option);
}
// 合计所有数据
function Sum_Data(Data){for(var i = 0;i<Data.length;i++){Sum = Sum + Data[i]['experience'];  //'experience'可随意替换为合计字段}return Sum;
}

编辑后重新合计

有部分数据需要编辑之后再次进行合计，但是实践证明Lay-ui自带的合计在表格加载完成之后并不会再次合计，所以我们要监听单元格编辑函数让数据表格重新加载，以达到编辑后重新合计的效果
代码如下：

var Curr,Limit;
var option = {//数据表格定义代码，省略部分代码done: function(res, curr, count){Curr = curr;  //得到当前页码 Limit = res.data.length;  //获取当前页面显示的条数}
}
//table_R这个必须定义，定位当前数据表格
var table_Reload = table.render(option);
//编辑同步合计
table.on('edit(test)', function (result) {//lay-verify = test/* //获取当前修改的行数var Row = parseInt(result.tr.selector.split("\"")[1]); //修改的数据在总数据列表中的位置var Location = Limit * (Curr-1) + Row ;   var Field = result.field;  //当前编辑的字段名var Value = result.value;  //得到修改后的值Data[Location][Field] = Value;*///似乎上面注释的代码不用也可以，要是不行就取消注释吧.o(*￣3￣)o table_R.reload({data: Data //Data，当前存储的所有数据的集合，定义详见上一个代码块});
});

总代码

数据就偷懒不用异步了(｡･ω･｡)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/layui-v2.5.7/layui/css/layui.css" media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head><body><table class="layui-hide" id="test" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取总数</button><button class="layui-btn layui-btn-sm" lay-event="getTotalData">获取合计数目</button><button class="layui-btn layui-btn-sm" lay-event="SetTotalDatainteger">使合计数目变整型</button><button class="layui-btn layui-btn-sm" lay-event="getMeanValue">获取平均数</button></div>
</script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script><script src="/layui-v2.5.7/layui/layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script>layui.use('table', function () {var table = layui.table;var $ = layui.jquery;var Curr, Limit;var Data = [{"id": 10000,"username": "user-0","sex": "女","city": "城市-0","sign": "签名-0","experience": 255.25,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10001,"username": "user-1","sex": "男","city": "城市-1","sign": "签名-1","experience": 884,"logins": 58,"wealth": 64928690,"classify": "词人","score": 27},{"id": 10002,"username": "user-2","sex": "女","city": "城市-2","sign": "签名-2","experience": 650,"logins": 77,"wealth": 6298078,"classify": "酱油","score": 31},{"id": 10003,"username": "user-3","sex": "女","city": "城市-3","sign": "签名-3","experience": 362,"logins": 157,"wealth": 37117017,"classify": "诗人","score": 68},{"id": 10004,"username": "user-4","sex": "男","city": "城市-4","sign": "签名-4","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10005,"username": "user-5","sex": "女","city": "城市-5","sign": "签名-5","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10006,"username": "user-6","sex": "女","city": "城市-6","sign": "签名-6","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10007,"username": "user-7","sex": "男","city": "城市-7","sign": "签名-7","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10008,"username": "user-8","sex": "男","city": "城市-8","sign": "签名-8","experience": 951,"logins": 133,"wealth": 16503371,"classify": "词人","score": 14},{"id": 10009,"username": "user-9","sex": "女","city": "城市-9","sign": "签名-9","experience": 484,"logins": 25,"wealth": 86801934,"classify": "词人","score": 75},{"id": 10010,"username": "user-10","sex": "女","city": "城市-10","sign": "签名-10","experience": 100,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10011,"username": "user-11","sex": "男","city": "城市-1","sign": "签名-1","experience": 881,"logins": 58,"wealth": 64928690,"classify": "词人","score": 27},{"id": 10012,"username": "user-12","sex": "女","city": "城市-12","sign": "签名-12","experience": 650,"logins": 77,"wealth": 6298078,"classify": "酱油","score": 31},{"id": 10013,"username": "user-13","sex": "女","city": "城市-13","sign": "签名-13","experience": 362,"logins": 157,"wealth": 37117017,"classify": "诗人","score": 68},{"id": 10014,"username": "user-14","sex": "男","city": "城市-14","sign": "签名-14","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10015,"username": "user-15","sex": "女","city": "城市-15","sign": "签名-15","experience": 173,"logins": 68,"wealth": 61344147,"classify": "作家","score": 87},{"id": 11116,"username": "user-61","sex": "女","city": "城市-16","sign": "签名-16","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 11117,"username": "user-7","sex": "男","city": "城市-17","sign": "签名-17","experience": 101,"logins": 151,"wealth": 82131578,"classify": "作家","score": 28},{"id": 11118,"username": "user-18","sex": "男","city": "城市-18","sign": "签名-18","experience": 951,"logins": 133,"wealth": 16513371,"classify": "词人","score": 14},{"id": 11119,"username": "user-19","sex": "女","city": "城市-19","sign": "签名-19","experience": 484,"logins": 25,"wealth": 86811934,"classify": "词人","score": 75}]var option = {elem: '#test', page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], limits: [5, 10, 15, 20], first: 1 //不显示首页, last: false //不显示尾页}, toolbar: '#toolbarDemo', totalRow: true, cellMinWidth: 80, cols: [[{ type: 'checkbox', totalRowText: "合计" }, { field: 'id', width: 80, title: 'ID', sort: true }, { field: 'username', width: 100, title: '用户名' }, { field: 'sex', width: 80, title: '性别', sort: true }, { field: 'city', width: 80, title: '城市' }, { field: 'sign', title: '签名', minWidth: 150 }, { field: 'experience', width: 80, title: '积分', sort: true, totalRow: true, width: 100, edit: 'text' }, { field: 'score', width: 80, title: '评分', sort: true, edit: 'text' }, { field: 'classify', width: 80, title: '职业' }, { field: 'wealth', width: 135, title: '财富', sort: true }]], data: '', done: function (res, curr, count) {Curr = curr;  //得到当前页码 Limit = res.data.length;  //获取当前页面显示的条数}};option['data'] = Data;var table_R = table.render(option);//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var Sum = 0;for(var i = 0;i<Data.length;i++){Sum = Sum + Data[i]['experience'];  //'experience'可随意替换为合计字段}layer.alert(JSON.stringify(Sum));break;case 'getTotalData':var data = $(".layui-table-total div:eq(6)").html();//隐藏的行也算的var trArr = $(".layui-table-body.layui-table-main tr").length;layer.alert(JSON.stringify(data));break;case 'SetTotalDatainteger'://获取合计数据var data = $(".layui-table-total div:eq(6)").html();// 进行剪切/* Data = Data.substr(0, Data.indexOf("."));//赋值修改$(".layui-table-total div:eq(6)").html(Data);*/var array = data.split(".");if (array[1].substr(0, 1) > 4) {$(".layui-table-total div:eq(6)").html(parseInt(array[0]) + 1);} else {$(".layui-table-total div:eq(6)").html(parseInt(array[0]));}break;case 'getMeanValue':var data = $(".layui-table-total div:eq(6)").html();var trArr = $(".layui-table-body.layui-table-main tr").length;layer.alert(JSON.stringify(data / trArr));break;};});//编辑同步table.on('edit(test)', function (result) {//lay-verify = testvar Row = parseInt(result.tr.selector.split("\"")[1]);  //获取当前修改的行数var Location = Limit * (Curr - 1) + Row;   //修改的数据在总数据列表中的位置var Field = result.field;  //当前编辑的字段名var Value = result.value;    //得到修改后的值Data[Location][Field] = Value;table_R.reload({data:Data});});});</script></body></html>

Layui 数据表格合计相关推荐

layui数据表格合计行
在日常的学习或开发中,关于后台管理这一块的都会使用到layui.table数据表格,只要用到layui.table数据表格一般就会用到数据表格合计行. 在layui官方文档数据表格的这一栏中,有&qu ...
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
如何修改layui数据表格绑定的开关事件？
首先搭建layui 数据表格实例,由于篇幅有限,以下只展示局部关键的代码信息 tableCols = [[{field: 'id', title: 'ID', width:80,align:'cent ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...

Layui 数据表格合计

Lay-ui数据表格合计