Lay-ui数据表格合计
阅读提示：本人萌新一枚，写此博客仅仅是记录一下最近踩坑，有错漏的请大佬指正。
实现基础的数据表格合计
环境： 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.table
option['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 = 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;
table_R.reload({
data:Data
});
});
});
</script>
</body>
</html>
扫一扫
6169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
