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

原创 于 2024-11-08 17:59:34 发布 · 688 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

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

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


                

        

    


  


            

                    
            


    



                



	

		

			

				
					
fastadmin使用ECharts制作统计图

				
			

			

				

					向宇
				

				

					03-30
					
					3892
					
				

			

		

		

			
				
fastadmin使用ECharts制作统计图

demo
html代码
<div class="row" style="margin-bottom:5px;">
    
    <!-- Left col -->
    <section class="col-lg-7 connectedSortable">
        &lt.

			
		

	



                

            
              



	

		

			

				
					
fastadmin管理员页面实现手机验证码登录功能-腾讯云短信插件

				
			

			

				

					向宇
				

				

					03-17
					
					3910
					
				

			

		

		

			
				
fastadmin管理员页面实现手机验证码登录功能-腾讯云短信插件

			
		

	



              


  
              

                


	

		

			

				
					
fastadmin 列表页，某一个字段，点击弹窗显示信息

				
			

			

				

					misshow
				

				

					10-07
					
					919
					
				

			

		

		

			
				
【代码】fastadmin 列表页，某一个字段，点击弹窗显示信息。

			
		

	





	

		

			

				
					
fastadmin 点击checkbox 或反选checkbox 统计某个字段的值

				
			

			

				

					jerly1943的博客
				

				

					02-22
					
					1137
					
				

			

		

		

			
				
思路是利用fastadmin的事件回调，对应的文档链接为：https://doc.fastadmin.net/doc/194.html。jquery的思路是，在触发了点击checkbox（全选、反选、单个勾选、单个反选）对应的事件时，进行值的统计。需要实现的效果如上图，当勾选了checkbox将分类ID的值累加到统计数据中（红色框对于的勾选分类ID之和））之后，添加如下代码。本文来自：https://www.cnblogs.com/hjxcode/p/16174253.html。html中添加显示的内容。

			
		

	



		

			
		



	

		

			

				
					
FastAdmin表格添加统计信息

				
			

			

				

					qq_40088333的博客
				

				

					10-13
					
					1670
					
				

			

		

		

			
				
FastAdmin 表格添加统计信息

			
		

	





	

		

			

				
					
fastadmin列表添加统计行

				
			

			

				

					qq_40088333的博客
				

				

					09-01
					
					975
					
				

			

		

		

			
				
fastadmin给列表添加一行统计

			
		

	





	

		

			

				
					
fastadmin后台自定义按钮和弹窗

				
			

			

				

					小坚的技术博客
				

				

					01-31
					
					8920
					
				

			

		

		

			
				
后台添加自定义按钮和弹窗

			
		

	





	

		

			

				
					
fastadmin监听表格checkbox点击

				
			

			

				

					Turbo
				

				

					12-13
					
					692
					
				

			

		

		

			
				
fastadmin监听表格checkbox点击

			
		

	





	

		

			

				
					
fastadmin学习笔记

				
			

			

				

					向宇
				

				

					03-08
					
					2944
					
				

			

		

		

			
				
fastadmin学习笔记

2.		是否可搜索筛选，默认是

3.自定义文本输出




			
		

	





	

		

			

				
					
获取checkbox中被选中的值

				
			

			

				

					qq_41353397的博客
				

				

					10-08
					
					1478
					
				

			

		

		

			
				
html代码：
<form name="testForm" id="myForm">
	<input type="checkbox" name="ids" value="1" />1<br />
	<input type="checkbox" name="ids" value="2" />2<br />
	<input type="checkbox" name="ids" value="3" />3<br />
	<i

			
		

	





	

		

			

				
					
libu:用于多用户记录各种宴席的收款记录等，有搜索姓名备注和统计总金额功能！ 基于Fastadmin开发，QQ群153073132

				
			

			

				

					05-11
				

			

		

		

			
				
礼簿管理系统（方便添加，找查，统计，导出数据）免费使用，开源,是一款基于FastAdmin->ThinkPHP5+Bootstrap。
在线演示
用户名：test
密　码：123456
提　示：演示站数据可以进行修改，请下载源码安装体验全部功能
问题反馈
在使用中有任何问题，请使用以下联系方式联系我们
QQ群: [153073132]
主要特性
基于Auth验证的权限管理系统
支持无限级父子级权限继承，父级的管理员可任意增删改子级管理员及权限设置
支持单管理员多角色
支持管理子级数据或个人数据（每个人的数据是独立的，只能查看添加删除自己的）
强大的一键生成功能
一键生成API接口文档
强大的插件扩展功能，在线安装卸载升级插件
通用的会员模块和API模块
共用同一账号体系的Web端会员中心权限验证和API接口会员权限验证
二级域名部署支持，同时域名支持绑定到应用插件
多语言支持，服务端及客户

			
		

	





	

		

			

				
					
fastAdmin表格列表的功能

				
			

			

				

					glovenone的专栏
				

				

					02-28
					
					5406
					
				

			

		

		

			
				
fastmin后台使用介绍；发送ajax请求

			
		

	





	

		

			

				
					
fastadmin框架后台列表固定第一行列表固定头部

				
			

			

				

					LordForce的博客
				

				

					07-10
					
					932
					
				

			

		

		

			
				
fastadmin固定列表第一行|fastadmin框架固定头部|fastadmin冻结第一行

			
		

	





	

		

			

				
					
Fastadmin 后台列表页面列自定义点击事件

				
			

			

				

					fangwenkai的博客
				

				

					08-30
					
					2522
					
				

			

		

		

			
				
在做项目过程中经常遇到某一列使用富文本填写内容，如果使用使用table默认展示方式会导致该列展示很长，倒是使用体验差。可以在该列加上一个按钮，点击按钮后后弹窗展示改字段内容。

			
		

	





	

		

			

				
					
Fastadmin之 后台页面js，设置操作栏按钮根据某个字段值，设置是否显示 以及，多种js事件

				
			

			

				

					qq_39835505的博客
				

				

					10-18
					
					606
					
				

			

		

		

			
				
js中 设置状态栏可搜索，展示在搜索行。js中，ajax提交form表单。js中，设置某个字段，显示的值。

			
		

	





	

		

			

				
					
fastadmin 后台列表数据多表查询筛选

				
			

			

				

					T_Hong的博客
				

				

					10-09
					
					1997
					
				

			

		

		

			
				
注意：接口返回数据格式一定以json格式返回。记录下 后期方便直接粘贴使用。

			
		

	





	

		

			

				
					
fastadmin笔记，fastadmin表格功能

				
			

			

				

					魍魉
				

				

					10-21
					
					1281
					
				

			

		

		

			
				
fastadmin笔记，fastadmin表格功能

			
		

	





	

		

			

				
					
fastadmin点击字段值，在当前页面搜索所有该字段值的信息

				
			

			

				

					天龙的博客
				

				

					08-05
					
					670
					
				

			

		

		

			
				
fastadmin点击字段值，在当前页面搜索所有该字段值的信息

			
		

	





	

		

			

				
					
fastadmin table.bootstrapTable({ 列表 checkbox 只能点击方框才选中，怎样使点击一行都选中

					
最新发布

				
			

			

				

					11-19
				

			

		

		

			
				
<think>
我们参考了引用[1]和引用[3]：引用[1]提到在数据加载成功后执行默认选中方法`checkBy`，以及处理values值的问题。引用[3]则提到了使用`onClickRow`事件来改变行的背景颜色，同时我们可以利用这个事件来实现点击行选中checkbox。

在FastAdmin中，使用bootstrapTable，要实现点击一行就选中该行的checkbox，我们可以通过以下步骤：
1. 在初始化表格时，设置`clickToSelect: true`，这个选项可以让点击行时选中该行（包括checkbox）。但是，根据引用[3]的经验，我们可能需要结合事件来处理。
2. 另外，我们可以监听`onClickRow`事件，在这个事件中手动切换该行的选中状态。

但是注意：引用[1]中提到了默认选中的方法`checkBy`，而引用[3]提到了使用事件来改变行状态。

根据bootstrap-table的文档，我们可以通过设置`clickToSelect: true`来达到目的。但是，有时候可能需要自定义事件，特别是当默认行为不满足需求时。

具体步骤：
1. 在表格初始化时，设置`clickToSelect: true`，这样点击行时就会选中该行（包括复选框）。
2. 如果默认设置没有生效，我们可以使用`onClickRow`事件来手动触发复选框的选中。

然而，在FastAdmin中，我们通常通过配置`table`的选项来实现。因此，我们可以尝试在表格初始化配置中加入`clickToSelect: true`。

但是，如果这样设置后仍然无效，我们可以通过以下方式：
```javascript
{
    onClickRow: function (row, $element) {
        // 手动切换选中状态
        $table.bootstrapTable('check', $element.index());
    }
}
```

注意：这里`$table`是表格的jQuery对象。

另外，引用[1]中提到了数据加载成功后执行默认选中的方法，我们也可以借鉴，在数据加载成功后绑定点击事件。

但是，根据问题，我们只需要点击行选中复选框，所以主要关注`clickToSelect`和`onClickRow`。

综合以上，给出两种方法：

方法一（推荐，使用内置选项）：
在初始化表格时，设置`clickToSelect: true`。

方法二（使用事件）：
在初始化表格时，添加`onClickRow`事件，手动选中该行。

由于FastAdmin中已经封装了bootstrapTable，我们可以在后台管理列表的index.html中对应的js部分进行配置。

示例代码（在FastAdmin中）：
```javascript
// 初始化表格
var table = $("#your-table-id");
table.bootstrapTable({
    // ...其他配置...
    clickToSelect: true,   // 启用点击行选中
    // 或者使用onClickRow事件（如果上面的不行，再用这个）
    onClickRow: function (row, $element, field) {
        // 获取当前行的索引
        var index = $element.data('index');  // 或者使用$element.index()，但注意bootstrap-table的行索引获取方式
        // 切换选中状态
        table.bootstrapTable('check', index);
    }
});
```

注意：在FastAdmin中，我们通常不需要自己写初始化表格的代码，因为FastAdmin已经封装了，但是我们可以通过自定义js来修改配置。

具体在FastAdmin中的操作步骤：
1. 在对应的控制器对应的index.html视图文件中，找到初始化表格的js代码，通常在`<script>`标签内。
2. 在初始化表格的配置项中加入`clickToSelect: true`。
3. 如果已经存在该配置项，确保其值为true。

如果还是不行，我们可以使用事件委托的方式，在表格渲染后给每一行绑定点击事件，但是这样可能会影响性能，所以优先用bootstrapTable自带的功能。

另外，引用[3]中提到了使用jQuery事件，我们可以这样：
```javascript
$("body").on("click", "table tr", function() {
    // 找到当前行的checkbox
    var checkbox = $(this).find('input[type="checkbox"]');
    checkbox.prop('checked', !checkbox.prop('checked'));
    // 可能需要触发change事件
    checkbox.trigger('change');
});
```

但是这种方法不够优雅，而且可能和bootstrapTable内部的事件冲突。

因此，我们优先采用bootstrapTable的配置。

总结：在FastAdmin中，实现点击行选中checkbox，主要是在表格初始化时设置`clickToSelect: true`。

如果问题仍未解决，请检查：
1. 是否在初始化时正确设置了该选项。
2. 是否有其他事件阻止了默认行为。

根据引用[1]的经验，还要注意数据加载成功后再执行操作，所以设置`clickToSelect`是初始化选项，应该没有问题。

另外，引用[2]提供了FastAdmin和bootstrap-table的文档链接，我们可以查阅相关文档。

最后，我们给出在FastAdmin中的解决方案：在表格初始化配置中加入`clickToSelect: true`。

注意：如果表格中使用了`formatter`自定义了复选框列，那么可能需要特殊处理，因为点击行时可能不会自动选中自定义的复选框。这时，我们需要在`formatter`中返回的复选框上绑定事件，或者利用`onClickRow`事件来设置自定义复选框的状态。

如果默认的复选框列（即使用`checkbox: true`）没有出现，那么设置`clickToSelect: true`可能不会生效，因为该选项是针对bootstrapTable自带的复选框列。所以，如果我们使用了自定义复选框列，那么需要自己处理点击事件。

在FastAdmin中，通常使用`checkbox: true`来显示复选框列，所以设置`clickToSelect: true`应该可以生效。

因此，我们得出结论：
在FastAdmin中，在初始化bootstrapTable时，设置`clickToSelect: true`即可实现点击行选中复选框。

如果已经设置但仍未生效，请检查是否有其他js代码覆盖了该行为。

我们也可以参考引用[3]中的做法，使用`onClickRow`事件来手动设置。

下面给出一个完整的示例，假设我们的表格id是`table`：
```javascript
$(function() {
    var table = $('#table');
    var options = {
        // ...其他配置...
        columns: [{
            checkbox: true
        }, 
        // ...其他列...
        ],
        clickToSelect: true   // 关键配置
    };
    table.bootstrapTable(options);
});
```

如果因为某些原因，点击行时复选框没有选中，我们可以用`onClickRow`事件来补充：
```javascript
$(function() {
    var table = $('#table');
    var options = {
        // ...其他配置...
        columns: [{
            checkbox: true
        }, 
        // ...其他列...
        ],
        clickToSelect: true,   // 先尝试开启
        onClickRow: function (row, $tr) {
            // 获取当前行的索引
            var index = $tr.data('index');
            // 切换选中状态
            table.bootstrapTable('check', index);
        }
    };
    table.bootstrapTable(options);
});
```

注意：这样写会导致点击行时选中，再次点击行时取消选中，符合预期。

但是，如果使用`onClickRow`事件，要注意避免重复触发，因为`clickToSelect`已经会触发一次，所以如果两个同时使用，可能会导致状态被切换两次（即先由`clickToSelect`选中，然后`onClickRow`又切换一次，结果就取消了）。因此，如果使用`onClickRow`，就不要设置`clickToSelect`为true（或者设为false）。

所以，如果`clickToSelect`无效，我们可以单独使用`onClickRow`事件来实现。

总结步骤：
1. 尝试在初始化表格时设置`clickToSelect: true`。
2. 如果无效，则使用`onClickRow`事件，并在事件中调用`check`或`uncheck`方法。

在FastAdmin中，我们可以在对应的JS文件中修改。例如，在后台的控制器对应的JS文件中，找到`table`的初始化部分，进行修改。

因此，我们提供两种方案，优先方案一，方案一无效则用方案二。

方案一（配置方式）：
```javascript
    $('#table').bootstrapTable({
        // 其他配置
        clickToSelect: true
    });
```

方案二（事件方式）：
```javascript
    $('#table').bootstrapTable({
        // 其他配置
        clickToSelect: false,   // 确保不冲突
        onClickRow: function(row, $tr) {
            var index = $tr.data('index');
            // 获取当前行的选中状态
            var isSelected = $tr.hasClass('selected');
            // 或者使用bootstrapTable的方法获取选中状态
            var selections = $('#table').bootstrapTable('getSelections');
            var isSelected = selections.some(item => item.id === row.id); // 假设row.id是唯一标识
            // 根据当前状态切换
            if (isSelected) {
                $('#table').bootstrapTable('uncheck', index);
            } else {
                $('#table').bootstrapTable('check', index);
            }
        }
    });
```

注意：使用事件方式时，如果行索引获取有问题，可以用行的唯一标识来选中，但bootstrapTable的`check`方法接受的是行索引（从0开始）或者行id（如果设置了`idField`）。所以，在初始化表格时，最好设置`idField`为你的主键字段，然后就可以用`checkBy`方法通过主键值来选中。

例如：
```javascript
    $('#table').bootstrapTable({
        idField: 'id',   // 设置主键字段
        // 其他配置
        onClickRow: function(row, $tr) {
            // 根据row.id来选中或取消选中
            var isSelected = $tr.hasClass('selected');
            if (isSelected) {
                $('#table').bootstrapTable('uncheckBy', {id: row.id});
            } else {
                $('#table').bootstrapTable('checkBy', {id: row.id});
            }
        }
    });
```

但是注意，`checkBy`和`uncheckBy`方法需要传入一个对象，该对象的键值对为`idField: value`。

综上，我们推荐在FastAdmin中优先使用方案一。如果方案一无效，再考虑方案二，并且注意设置`idField`。

最后，我们根据引用[1]的提示，如果涉及到默认选中，也要注意数据类型。

所以，回答用户的问题：在FastAdmin中，实现点击一行选中列表checkbox的方法是在表格初始化配置中设置`clickToSelect: true`。如果无效，可以使用`onClickRow`事件手动实现。

由于FastAdmin已经集成了很多功能，我们也可以在FastAdmin的论坛或文档中搜索是否有相关配置。

希望这些信息能帮助用户解决问题。
</think>在FastAdmin中使用BootstrapTable实现点击行选中复选框的功能，可以通过以下方法实现：

### 解决方案
1. **使用`clickToSelect`配置项（推荐）**  
   在初始化表格时添加`clickToSelect: true`配置项，这是最简洁的实现方式：
   ```javascript
   $('#your-table').bootstrapTable({
       clickToSelect: true,  // 启用点击行选中
       columns: [{
           checkbox: true    // 启用复选框列
       }, 
       // 其他列配置...
       ]
   });
   ```

2. **手动绑定`onClickRow`事件**  
   若需要更多控制，可通过事件绑定实现：
   ```javascript
   $('#your-table').bootstrapTable({
       onClickRow: function (row, $element) {
           // 获取当前行的复选框
           const $checkbox = $element.find('input[type="checkbox"]');
           
           // 切换选中状态
           const isChecked = $checkbox.prop('checked');
           $checkbox.prop('checked', !isChecked).trigger('change');
           
           // 更新行选中状态（可选）
           const index = $element.data('index');
           $('#your-table').bootstrapTable('updateRow', {
               index: index,
               row: {
                   state: !isChecked  // 假设有state字段记录状态
               }
           });
       }
   });
   ```

### 关键说明
1. **数据格式一致性**  
   如引用[1]所述，使用`checkBy`等方法时需确保ID值类型匹配（如数组元素需统一为字符串或数字）：
   ```javascript
   // 转换字符串ID为数字数组
   const ids = "1,2,3".split(',').map(Number);
   $('#table').bootstrapTable('checkBy', { values: ids });
   ```

2. **样式优化建议**  
   配合引用[3]的点击行变色效果：
   ```css
   /* 添加行点击样式 */
   .bootstrap-table tbody > tr { cursor: pointer; }
   .bootstrap-table tbody > tr.selected { background: #e6f7ff; }
   ```
   ```javascript
   // 在onClickRow中添加样式切换
   $('.selected').removeClass('selected');
   $element.addClass('selected');
   ```

### 完整示例
```javascript
$('#data-table').bootstrapTable({
    url: '/api/data',
    columns: [{
        checkbox: true
    }, {
        field: 'id',
        title: 'ID'
    }, {
        field: 'name',
        title: '名称'
    }],
    clickToSelect: true,  // 核心配置
    rowStyle: function(row, index) {
        return { classes: index % 2 === 0 ? 'even-row' : 'odd-row' };
    }
});
```

> **提示**：FastAdmin内置了BootstrapTable封装，可在`application/admin/view/common/script.html`中查找`$.fn.bootstrapTable.defaults`全局配置默认值[^2]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值