本文来自:http://www.cnblogs.com/over140/archive/2010/06/28/1766608.html,非常感谢作者的分享!
[ExtJs]Grid合计(三)
前言
今天又有朋友给发邮件询问Grid合计的问题,看的应该是我较早的文章,这里汇总一下并提供第三种合计的方法。
正文
一、方法一
通过修改JsonReader并使用插件GroupSummary,文章:ExtJs Grid 合计 [Ext | GridPanel | GridSummary]
二、方法二
先在后台 (C#服务端)统计好,然后添加DataTable(多返回一行数据),然后序列号成JSON返回给客户端,文章:ExtJs 备忘录(7)—— GirdPanl表格(三) [ 统计|查看、修改单行记录 ]
三、方法三
3.1 方法说明
直接在客户端统计,动态的修改Grid(js 操作)。
3.2 实现代码
function GridSum(grid)
{
var sum = 0;
grid.store.each(function(record){
sum += Number(record.data.money);
});
var n = grid.getStore().getCount();// 获得总行数
var p = new Ext.data.Record({
id: '总计:',
money:sum
});
grid.store.insert(n, p);// 插入到最后一行
}
//加载数据
store.load({
callback: function(r,options,success) {
if(!success)
alert("数据加载失败!");
GridSum(grid);
}
});
{
var sum = 0;
grid.store.each(function(record){
sum += Number(record.data.money);
});
var n = grid.getStore().getCount();// 获得总行数
var p = new Ext.data.Record({
id: '总计:',
money:sum
});
grid.store.insert(n, p);// 插入到最后一行
}
//加载数据
store.load({
callback: function(r,options,success) {
if(!success)
alert("数据加载失败!");
GridSum(grid);
}
});
代码说明:
a). store为Ext.data.Store,取数据部分代码在这里就省略了;grid是Ext.grid.GridPanel,同上。
b). 注意GridSum不要写到load方法之后,否则数据还没加载完就动态插入一行,会看见闪一下就没有的现象,一定要注意加载完成后再调用统计的方法。
四、总结和比较
4.1 第一种方法很明显是最复杂的,基本可以被淘汰。
4.2 第二种方法比较不错,擅长于写后台代码的比较喜欢,虽然麻烦点,但是非常灵活,在分页的情况下能统计一页也能统计所以的数据。
4.3 第三种方法最简单,适合统计一页数据,即务须做分页的表格。
4.4 注意这三个版本例子的ExtJs版本号可能不一样,第二种应该是最通用的。
相关推荐
ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...
- 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...
1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...
在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...
ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...
EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...
### ExtJs Grid 多选及获取选中值详解 #### 一、背景介绍 在Web应用开发中,ExtJs 是一款非常强大的JavaScript框架,它能够帮助开发者快速构建复杂的用户界面。其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个...
EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...
在EXTJS开发中,我们经常会遇到使用Grid组件展示数据的情况,特别是当数据包含中文字符时,可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好,但对于中文字符,由于编码和比较规则的不同,可能...
ExtJS Grid是一款强大的数据展示组件,常用于构建复杂的Web应用程序中的数据网格。多表头插件是ExtJS Grid的一个重要特性,它允许我们创建具有多层次、复杂结构的表头,以便更好地组织和呈现数据。在ExtJS Grid中,...
ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...
ExtJS Grid是一个强大的数据展示组件,它在Web应用程序中用于显示和操作大量数据。Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,是ExtJS库中的核心组件之一。"Extjs Grid 扩展实例"是一个演示如何增强Grid...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
ExtJS GRID是一款强大的JavaScript数据网格组件,用于展示和操作大量结构化数据。在ExtJS 4.0版本中,Grid提供了单元格合并的功能,这在处理复杂数据展示时非常有用,比如汇总信息或者创建表头合并。下面我们将深入...
根据提供的文件信息以及标题与描述,本文将详细探讨Extjs Grid的操作大全,特别是关于如何获取Grid中的各种值以及如何添加各种点击事件。 ### Extjs Grid 操作大全 #### 一、Extjs Grid简介 Extjs 是一个用...
ExtJS Grid是一款强大的JavaScript组件,用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发,是Ext JS库的核心部分,广泛应用于企业级应用的前端开发,提供丰富的功能和高度的可定制性。这个"ExtJS_grid...
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题