`
xingyx
  • 浏览: 61856 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论
  • 52p9_xu: 感谢分享,本人最近闲来无事也想搭建一个 全注解的SSH框架。不 ...
    SSH注解框架

[ExtJs] Grid合计

阅读更多

本文来自: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);
    }
});
复制代码

      代码说明:

        a).  store为Ext.data.Store,取数据部分代码在这里就省略了;grid是Ext.grid.GridPanel,同上。

        b).  注意GridSum不要写到load方法之后,否则数据还没加载完就动态插入一行,会看见闪一下就没有的现象,一定要注意加载完成后再调用统计的方法。

 

  四、总结和比较

    4.1  第一种方法很明显是最复杂的,基本可以被淘汰。

    4.2  第二种方法比较不错,擅长于写后台代码的比较喜欢,虽然麻烦点,但是非常灵活,在分页的情况下能统计一页也能统计所以的数据。

    4.3  第三种方法最简单,适合统计一页数据,即务须做分页的表格。

    4.4  注意这三个版本例子的ExtJs版本号可能不一样,第二种应该是最通用的。

分享到:
评论

相关推荐

    给Extjs的GridPanel增加“合计”行

    - 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...

    ext grid 合计行

    找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...

    ExtJs6 导出excel(包含分组、分组合计行、二重表头)

    ExtJS6是该框架的一个版本,提供了丰富的组件和功能,其中包括数据网格(Grid)组件,能够展示大量的数据并进行复杂的操作。在标题和描述中提到的“导出Excel”功能,就是指将数据网格中的数据导出为Microsoft Excel...

    Extjs 4.2分组小计

    首先,我们需要理解ExtJS中的Grid组件。Grid是一种可配置的、可滚动的数据展示视图,用于显示二维数据集。分组功能允许我们将数据按照一个或多个字段进行分组,而小计功能则可以在每个分组底部计算特定字段的总和或...

    改变gridpanel的行颜色

    本文将详细介绍如何通过不同的方法来实现这一功能,包括在加载数据时改变列的颜色、加载数据后改变行的颜色以及使用ExtJS内置的颜色渲染效果。 #### 第一种情况:加载数据时改变列的颜色 当数据被加载到GridPanel...

    UniGUI集合说明--追月无名.pdf

    推荐在UniGUI中使用`Grid+Rport`报表控件的理由包括: - **灵活性**:可以灵活地定制报表布局。 - **性能优势**:相较于其他方案,有更好的性能表现。 #### 33. UniGUI的布局面板控件 TUniRegionPanel. `...

    UniGUI集合说明

    使用Grid+Report报表控件的方法是一种推荐的解决方案,它结合了数据网格与报表的功能,能够更灵活地展示和打印数据。 #### 33. UniGUI的布局面板控件TUniRegionPanel `TUniRegionPanel`是一种用于布局控制的容器...

    UniGUI 说明

    35. UniGUI 使用报表 Grid+Report 的方法之二 (动态调用 ) ................................................ 28 36. UniGUI 中 Cookies 使用中文汉字的方法 .......................................................

Global site tag (gtag.js) - Google Analytics