<!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="../../lib/layuiadmin/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="../../lib/layuiadmin/layui/layui.js"></script>
<script src="../../lib/jquery/jquery-2.0.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test',
url: './data.json' /*tpa=/test/table/demo1.json*/,
title: '用户数据表',
totalRow: true,
cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
sort: true,
totalRowText: '合计'
}, {
field: 'username',
title: '用户名',
width: 120,
edit: 'text'
}, {
field: 'experience',
title: '积分',
width: 100,
sort: true,
totalRow: true
}, {
field: 'sex',
title: '性别',
width: 80,
edit: 'text',
sort: true
}, {
field: 'logins',
title: '自动合计次数',
edit: 'text',
sort: true,
totalRow: true
}]
],
page: true
});
var util = layui.util;
//监听单元格编辑
table.on('edit(test)', function (obj) {
var value = obj.value //得到修改后的值
,
data = obj.data //得到所在行所有键值
,
field = obj.field; //得到字段
var sum = 0;
layui.table.cache["test"].forEach(function (i) {
sum += parseInt(i.logins);
})
$('.layui-table-total td[data-field="logins"] .layui-table-cell').text(sum);//将计算结果复制给“评分”列的合计行
layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value) + " 合计值为：" + sum);
});
});
</script>
</body>
</html>
核心代码
layui.table.cache["test"] test为tableID
$('.layui-table-total td[data-field="要计算的field的名称"] .layui-table-cell').text(设置的值);
//监听单元格编辑
table.on('edit(test)', function (obj) {
var value = obj.value //得到修改后的值
,
data = obj.data //得到所在行所有键值
,
field = obj.field; //得到字段
var sum = 0;
layui.table.cache["test"].forEach(function (i) {
sum += parseInt(i.logins);
})
$('.layui-table-total td[data-field="logins"] .layui-table-cell').text(sum);//将计算结果复制给“评分”列的合计行
layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value) + " 合计值为：" + sum);
});
渲染后计算
table.render({
elem: '#test',
url: './data.json' /*tpa=/test/table/demo1.json*/,
title: '用户数据表',
totalRow: true,
cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
sort: true,
totalRowText: '合计'
}, {
field: 'username',
title: '用户名',
width: 120,
edit: 'text'
}, {
field: 'experience',
title: '积分',
width: 100,
sort: true,
totalRow: true
}, {
field: 'sex',
title: '性别',
width: 80,
edit: 'text',
sort: true
}, {
field: 'logins',
title: '自动合计次数',
edit: 'text',
sort: true,
totalRow: true
}]
],
page: true,
, done: function (res, curr, count) {//数据渲染完的回调。
var data = res.data; //获取数据
var rowNums = res.data.length;//获取行数
// 获取数据做各种计算
}
});
效果
