当前位置: 首页 > article >正文

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);
});


http://www.kler.cn/a/384836.html

相关文章:

  • RPA是什么,RPA有什么作用?
  • Redis 组网方式入门
  • 物理验证Calibre LVS | SMIC Process过LVS时VNW和VPW要如何做处理?
  • 华为HCIP —— QinQ技术实验配置
  • 详解Python面向对象程序设计
  • 【Linux】Linux下查看cpu信息指令(top/mpstat/iostat/pidstat)说明
  • 关于git命令
  • 潮玩宇宙方块兽系统开发:可定制UI与多种游戏内嵌助力个性化体验
  • 【JAVA毕业设计】基于Vue和SpringBoot的图书馆管理系统
  • GS-SLAM论文阅读--High-Fidelity SLAM Using Gaussian Splatting
  • 设计模式之——观察者模式
  • Vue3+element-plus摘要
  • 从零学习大模型(十四)-----量化(一)
  • Autosar 存储闲聊:使用EEP配Flash存储方案的可靠性和耐久性
  • 文件系统和日志管理
  • 基于java+SpringBoot+Vue的协力服装厂服装生产管理系统设计与实现
  • 数据分析的力量如何驱动商业决策和创新发展
  • 开源AI图片处理工具HivisionIDPhotos安装与证件照制作指南
  • STM32中ARR(自动重装寄存器)为什么要减1
  • STL之string的使用(超详解)
  • 一、初识C语言(1)
  • 厦门网站建设步骤与技巧
  • 深度学习:AT Decoder 详解
  • CSS画icon图标系列(一)
  • 鸿蒙生态崛起:开发者机遇、挑战与未来展望
  • 【go从零单排】go中的nil到底是啥意思?