fastadmin后台列表根据所选中的行统计指定字段|fastadmin点击checkbox或反选统计某个字段的值
当选中对应行时,统计选中行的用户注册数和用户点击数。
此项功能需要有 点击全选触发事件、点击反选触发事件、勾选某一行触发事件、反选某一行触发事件,用到fastadmin自带的表格事件功能,参考:https://doc.fastadmin.net/doc/194.html
1、在index.html页面,添加:
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
<i class="fa fa-user"></i>
<span class="extend">
{:__('TotalCountUsers')}:<span id="totalCountUsers">0</span>
</span>
</a>
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
<i class="fa fa-clipboard"></i>
<span class="extend">
{:__('TotalCountClick')}:<span id="totalCountClick">0</span>
</span>
</a>
2、在对应的 .js文件,添加:
//当表格数据加载完成时
table.on('load-success.bs.table', function (e, data) {
// 初始化值,防止点击页面的刷新按钮时,统计数据还是显示上一次的数据
$("#totalCountUsers").text("0");
$("#totalCountClick").text("0");
});
table.on('check-all.bs.table',function (e, rows) {
// 点击全选触发事件
var selectCountUsers = 0; // 选中总用户注册数
var selectCountClick = 0; // 选中总用户点击数
for (i = 0;i<rows.length;i++) {
selectCountUsers = selectCountUsers + rows[i].countUsers;
selectCountClick = selectCountClick + rows[i].countClick;
}
$("#totalCountUsers").text(selectCountUsers);
$("#totalCountClick").text(selectCountClick);
});
table.on('uncheck-all.bs.table',function (e, rows) {
// 点击反选触发事件
$("#totalCountUsers").text("0");
$("#totalCountClick").text("0");
});
table.on('check.bs.table',function (e, row) {
// 勾选某一行触发事件
var selectCountUsers = parseInt($("#totalCountUsers").text()) + row.countUsers; // 选中总用户注册数
var selectCountClick = parseInt($("#totalCountClick").text()) + row.countClick; // 选中总用户点击数
$("#totalCountUsers").text(selectCountUsers);
$("#totalCountClick").text(selectCountClick);
});
table.on('uncheck.bs.table',function (e, row) {
// 反选某一行触发事件
var selectCountUsers = parseInt($("#totalCountUsers").text()) - row.countUsers; // 选中总用户注册数
var selectCountClick = parseInt($("#totalCountClick").text()) - row.countClick; // 选中总用户点击数
$("#totalCountUsers").text(selectCountUsers);
$("#totalCountClick").text(selectCountClick);
});