`

为Ext GridPanel添加对复选框勾选行指定列求和的方法

    博客分类:
  • Ext
EXT 
阅读更多

又是项目需求。对带有复选框的GridPanel,需要有方法可以获得所有当前勾选行的某一列的数据之和。

Ext本身有一个GridSummary.js的扩展。不过我大概看了一下(没仔细研究),没针对checkBox勾选行的统计功能。因而对Ext.grid.GridPanel做了无情的扩展,代码如下:

 

Ext.grid.HsGridPanel = Ext.extend(Ext.grid.GridPanel,{
......
    /**
	 * 返回已经勾选所有行指定列的值的sum
	 * @author weic
	 * @param sumColumnName 要累加的列
	 * @param fastCount [true/false,空]true是快速计算,牺牲一点小数的准确度,默认(不写这个属性的话)是false
	 * @param fixLength 限制返回值的小数位数
	 */
	getSelectionSum:function(sumColumnName, fastCount, fixLength){
		function floatAdd(arg1,arg2){
		  var r1,r2,m;
		  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
		  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
		  m=Math.pow(10,Math.max(r1,r2))
		  return (arg1*m+arg2*m)/m
		}
		var selectedLines = this.getSelectionModel().getSelections();
		if(selectedLines.length > 0){
			var sum = 0;
			if(fastCount == undefined || !fastCount){
				for(var i=0; i<selectedLines.length; i++){
					sum = floatAdd(sum,selectedLines[i].get(sumColumnName));
				}
			}
			else if(fastCount){
				for(var i=0; i<selectedLines.length; i++){
					sum = sum + selectedLines[i].get(sumColumnName);
				}
			}
		}
		if(fixLength){
			//alert("限制小数位" + fixLength);
			var tempSum = sum;
			try{  sum = sum.toFixed(fixLength)  }  catch(e){ sum = tempSum}
		}
		//alert(sum);
		return sum;
	}
......
}

 

使用的时候,GridPanel的实例如果是grid, 就调用 grid.getSelectionSum('列名');可以获得这个列的勾选值的总和。

当给了这个方法第2个参数的时候  grid.getSelectionSum('列名',true);就调用快速计算,在大数据量的时候速度比较高,但会损失高位小数的精度。设置为false就不会。

第3个参数(也可以不写),指定小数的保留位数。

截图如下:

 

1.快速计算------grid.getSelectionSum('price',true);

 

2. 精确计算------grid.getSelectionSum('price');



 
3. 保留一位小数------grid.getSelectionSum('price',true,1);



  • 大小: 45 KB
  • 大小: 60.3 KB
  • 大小: 75.5 KB
分享到:
评论

相关推荐

    Ext GridPanel 中实现加链接操作

    ### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...

    ext gridpanel 跨行

    2. **配置ColumnModel**:在GridPanel的ColumnModel中,为需要跨行的列指定renderer函数。 3. **处理Store数据**:根据业务逻辑,可能需要在数据加载到Store之前进行预处理,以便在渲染时正确地计算rowspan。 4. **...

    Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法

    在Extjs中,GridPanel组件是非常常用的一个表格组件,它提供了丰富的功能来...总的来说,通过上述方法,我们可以在Extjs的GridPanel中根据某行数据的条件控制复选框的显示及选中状态,有效地实现复杂的业务逻辑需求。

    EXT GridPanel获取某一单元格的值

    EXT GridPanel的列模型(ColumnModel)提供了此方法来映射列索引到数据字段名。 - `record.get(fieldName);` 使用Record对象的get方法,通过字段名获取单元格的值。`fieldName`变量包含了之前获取的列对应的字段名...

    给Extjs的GridPanel增加“合计”行

    - 可以通过遍历Store中的所有记录,对指定列进行求和,得到合计值。 3. **添加合计行模板**: - 定义一个合计行的模板,可以使用EXTJS的XTemplate。模板中包含合计值的占位符,这些占位符将在数据计算完成后被...

    Ext GridPanel导出Excel(改进)

    将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...

    ExtJs GridPanel双击事件获得双击的行

    以上就是关于ExtJs GridPanel双击事件获取双击的行及选中复选框状态的实现方法。通过这些知识,你可以轻松地在GridPanel中添加用户交互功能,提升应用程序的用户体验。请确保在实际项目中根据需求调整代码,以满足...

    ext.net 动态创建gridpanel

    - 将 `GridPanel` 添加到相应的容器,例如 `Ext.Net.Panel` 或 `Ext.Net.Window`。 2. **显示在各种窗口中**: GridPanel 可以被嵌入到不同类型的容器中,以满足不同的展示需求。常见的容器有: - **Panel**:...

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    5. 最后,你需要在GridPanel的视图配置中指定RowExpander的列宽度,以确保展开按钮的可见性。 ```javascript viewConfig: { plugins: [{ ptype: 'gridviewdragdrop', dragGroup: 'ddGroup', dropGroup: '...

    Ext的gridpanel控件二次加载问题

    总之,解决Ext的gridpanel控件二次加载时丢失的问题需要对Ext JS的生命周期管理有深入的理解,并结合实际应用场景选择合适的策略。无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理...

    Ext.grid.GridPanel属性祥解

    ### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...

    EXTJSEXT实例GridPanel.

    这个"EXTJSEXT实例GridPanel"可能是为了演示基本的GridPanel使用方法,包括数据绑定、列定义以及如何在页面上渲染GridPanel。通过学习和实践这个例子,开发者可以快速掌握EXTJS中数据展示的核心技术。配合EXT提供的...

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    Ext中grid多行数据全部删除

    ### Ext中grid多行数据全部删除 在前端开发过程中,我们经常会遇到需要处理表格数据的情况。其中,ExtJS是一个非常强大的JavaScript框架,它提供了一系列工具和组件来帮助开发者快速构建复杂的用户界面。本文将详细...

    GridPanel中的单元格不能选中复制的解决方法

    "GridPanel中的单元格不能选中复制的解决方法" Ext.grid.GridPanel 是一个功能强大且广泛使用的Grid控件,但是它存在一个很大的缺陷:单元格的内容不能选中,没法选中就没法复制,这给用户带来了很多不便。这个...

    Ext GridPanel加载完数据后进行操作示例代码

    在Ext JS中,`Ext GridPanel`是一种常用的组件,用于展示和操作表格数据。它具有丰富的功能,包括分页、排序、筛选等。本示例主要关注在`GridPanel`加载完数据后如何进行特定的操作,特别是选定某些行数据。 首先,...

    ext.net gridpanel 弹出窗

    ext.net gridpanel 弹出窗

    Ext修改GridPanel数据和字体颜色、css属性等

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据并提供交互功能。在实际开发中,我们经常需要对GridPanel的数据、字体颜色以及CSS样式进行自定义,以满足各种业务需求。本篇文章...

Global site tag (gtag.js) - Google Analytics