demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>demo</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<table class="layui-table" lay-data="{url:'demo.json', id:'test3', totalRow:'true'}" lay-filter="test3">
<thead>
<tr>
<th lay-data="{type:'checkbox'}">ID</th>
<th lay-data="{field:'id', width:80, sort: true, totalRowText: '合计：'}">ID</th>
<th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
<th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
<th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
<th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
<th lay-data="{field:'experience', sort: true, totalRow:true,edit: 'text'}">积分</th>
</tr>
</thead>
</table>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//监听单元格编辑
table.on('edit(test3)', function(obj){
var newData = table.cache["test3"];
var value = obj.value;
var data = obj.data;
var field = obj.field;
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
var sum=parseFloat(0);
for (i = 0; i < newData.length; i++) {
sum += parseFloat(newData[i].experience);
}
console.log(sum);
var x = document.getElementsByClassName("layui-table-cell laytable-cell-1-0-6");
console.log(x);
console.log(x[x.length-1]);
x[x.length-1].innerText=sum;
});
});
</script>
</body>
</html>
demo.json
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": "10001",
"username": "杜甫",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "116",
"ip": "192.168.0.8",
"logins": "108",
"joinTime": "2016-10-14"
},
{
"id": "10002",
"username": "李白",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14",
"LAY_CHECKED": true
},
{
"id": "10003",
"username": "王勃",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "65",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10004",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "666",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10005",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "86",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10006",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10007",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "16",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10008",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "106",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
}
]
}
