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

news2024/11/26 15:23:18

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

此项功能需要有 点击全选触发事件、点击反选触发事件、勾选某一行触发事件、反选某一行触发事件,用到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.coloradmin.cn/o/2236254.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

stm32使用串口DMA实现数据的收发

前言 DMA的作用就是帮助CPU来传输数据&#xff0c;从而使CPU去完成更重要的任务&#xff0c;不浪费CPU的时间。 一、配置stm32cubeMX 这两个全添加上。参数配置一般默认即可 代码部分 只需要把上期文章里的HAL_UART_Transmit_IT(&huart2,DATE,2); 全都改为HAL_UART_Tra…

轨迹规划中优化预测:学习多个初始解的优化器

Abstract 在许多应用中&#xff0c;如机器人控制、自动驾驶和投资组合管理&#xff0c;需要在严格的运行时间限制下连续地解决相似的优化问题。在这种情况下&#xff0c;局部优化方法的性能对初始解的质量非常敏感&#xff1a;不良的初始化可能会导致收敛缓慢或得到次优解。为…

05 SQL炼金术:深入探索与实战优化

文章目录 SQL炼金术&#xff1a;深入探索与实战优化一、SQL解析与执行计划1.1 获取执行计划1.2 解读执行计划 二、统计信息与执行上下文2.1 收集统计信息2.2 执行上下文 三、SQL优化工具与实战3.1 SQL Profile3.2 Hint3.3 Plan Baselines3.4 实战优化示例 SQL炼金术&#xff1a…

JS封装随机生成一个颜色值工具函数

本文给大家带来的是封装的一个随机生成一个颜色值的工具函数。案例中提供了4个不同的调用函数&#xff0c;但实现的功能本质上都是一样的&#xff0c;开箱即用&#xff0c;随调随用。 //方法一 function getRandomColor() { //随机颜色return #${Math.floor(Math.random() * …

CESS 正式加入政府区块链协会 (GBA) ,出席 Blockchain Infrastructure 大会

北京时间 11 月 6 日&#xff0c;特朗普赢得 2024 年美国总统大选。与此同时&#xff0c;我们很高兴地宣布&#xff0c;CESS 已正式加入政府区块链协会 (GBA)。GBA 是一个全球性协会&#xff0c;致力于将区块链专业人士汇聚在一起&#xff0c;共同推动区块链技术在政府、金融和…

ARXML汽车可扩展标记性语言规范讲解

ARXML: Automotive Extensible Markup Language &#xff08;汽车可扩展标记语言&#xff09; xmlns: Xml name space &#xff08;xml 命名空间&#xff09; xsd: Xml Schema Definition (xml 架构定义) 1、XML与HTML的区别&#xff0c;可扩展。 可扩展&#xff0c;主要是…

数据结构_哈夫曼树及其应用

构造算法的例子 构造算法的实现 初始化&#xff0c;置权值 int i, m, s1, s2;m 2 * n - 1;for (i 1; i < m; i){HT[i].lch 0;HT[i].rch 0;HT[i].parent 0;}for (i 1; i < n; i){cin >> HT[i].weight;}合并结点 // 创建哈夫曼树for (i n 1; i < m; i){s1…

基于AI深度学习的中医针灸实训室腹针穴位智能辅助定位系统开发

在中医针灸的传统治疗中&#xff0c;穴位取穴的精确度对于治疗效果至关重要。然而&#xff0c;传统的定位方法&#xff0c;如体表标志法、骨度折量法和指寸法&#xff0c;由于观察角度、个体差异&#xff08;如人体姿态和皮肤纹理&#xff09;以及环境因素的干扰&#xff0c;往…

esp32学习:利用虫洞ESP32开发板,快速实现无线图传

我们的虫洞开发板&#xff0c;能够完美运行esp who AI代码&#xff0c;所以实现无线图传那是非常容易的&#xff0c;我们先看看examples目录&#xff1a; 里面有比较多的web例程&#xff0c;在这些例程下&#xff0c;稍作修改&#xff0c;就可以快速实现我的图传无线功能&#…

力扣排序455题(分发饼干)

假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。 但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i],这是能 让孩子们满足胃口的饼干的最小尺寸;并且每块饼 干j&#xff0c;都有一个尺寸 s[j]。如果 s[j]> g[i]&…

【论文复现】基于深度学习的手势识别算法

本文所涉及所有资源均在这里可获取。 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff0c;喜爱音乐、摄影的一位博主。 &#x1f4d7;本文收录于论文复现系列&#xff0c;大家有兴趣的可以看一看…

ChatGPT键盘快捷键(按ctrl + /呼出)

文章目录 ChatGPT键盘快捷键- 打开新聊天: Ctrl Shift O- 聚焦聊天输入: Shift Esc- 复制最后一个代码块: Ctrl Shift ;- 复制最后一个回复: Ctrl Shift C- 设置自定义指令: Ctrl Shift I- 切换边栏: Ctrl Shift S- 删除聊天: Ctrl Shift ⌫- 显示快捷方式: Ctrl …

超详细:Vue入门

Vue(发音为 /vjuː/&#xff0c;类似 view)是近些年比较流行的前端框架之一&#xff0c;和 React、Angular 并称为前端三大框架。其中 Vue 简单易学的特点成为国内主流&#xff0c;很多公司已经把它列为一 个前端开发人员必须要掌握的技术点了。 Vue 简介 Vue2.x官网 Vue3.x …

鸿蒙next打包流程

目录 下载团结引擎 添加开源鸿蒙打包支持 打包报错 路径问题 安装DevEcoStudio 可以在DevEcoStudio进行打包hap和app 包结构 没法直接用previewer运行 真机运行和测试需要配置签名,DevEcoStudio可以自动配置, 模拟器安装hap提示报错 安装成功,但无法打开 团结1.3版本新增工具…

你是我的映射,我是你的值:C++ map 中的心灵共鸣

文章目录 map的概念一、map的使用1. 插入删除相关1&#xff09;插入(1) 插入语法(1) 插入语法 2&#xff09;删除 二. map的遍历三、map重载operator[]四、小试&#x1f402;&#x1f52a;1. 前K个高频单词2. 单词识别 总结 map的概念 map是key_value的模型&#xff1a; 一棵树…

RabbitMQ客户端应用开发实战

这一章节我们将快速完成RabbitMQ客户端基础功能的开发实战。 一、回顾RabbitMQ基础概念 这个RabbitMQ的核心组件&#xff0c;是进行应用开发的基础。 二、RabbitMQ基础编程模型 RabbitMQ提供了很多种主流编程语言的客户端支持。这里我们只分析Java语言的客户端。 上一章节提…

RNA-seq 差异分析的点点滴滴(1)

引言 本系列[1])将开展全新的转录组分析专栏&#xff0c;主要针对使用DESeq2时可能出现的问题和方法进行展开。 为何使用未经标准化的计数数据&#xff1f; DESeq2 工具包在接收输入时&#xff0c;期望得到的是未经处理的原始计数数据&#xff0c;比如从 RNA-seq 或其他高通量测…

RTC精度及校准

RTC精度偏差&#xff1a; RTC的基准时间和精度与石英晶体的频率相关&#xff0c;晶体的谐振频率取决于温度&#xff0c;因此RTC性能与温度相关&#xff0c;晶体的频率偏差是晶体正常频率的温度反转函数。 一、硬件方面&#xff1a; 1.使用高精度振荡器的RTC模块&#xff1b; …

智慧城市路面垃圾识别系统产品介绍方案

方案介绍 智慧城市中的路面垃圾识别算法通常基于深度学习框架&#xff0c;这些算法因其在速度和精度上的优势而被广泛采用。这些模型能够通过训练识别多种类型的垃圾&#xff0c;包括塑料袋、纸屑、玻璃瓶等。系统通过训练深度学习模型&#xff0c;使其能够识别并定位多种类型…

【安当产品应用案例100集】029-使用安全芯片保护设备核心业务逻辑

我国工业企业普遍缺乏数据安全意识&#xff0c;对数据安全保护缺乏基本认识。这导致企业在数据安全方面的投入不足&#xff0c;保护能力基本不具备&#xff0c;难以有效应对数据安全风险。不过随着安全事件越来越多&#xff0c;很多工业企业的安全意识也越来越高&#xff0c;在…