fastadmin后台列表根据所选中的行统计指定字段|fastadmin点击checkbox或反选统计某个字段的值

时间:2024-11-09 10:13:07

当选中对应行时,统计选中行的用户注册数和用户点击数。

此项功能需要有 点击全选触发事件、点击反选触发事件、勾选某一行触发事件、反选某一行触发事件,用到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);
});