[ExtJs]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版本号可能不一样,第二种应该是最通用的。

 


本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586528,如需转载请自行联系原作者

相关文章
|
5月前
|
Web App开发 JSON JavaScript
基于ExtJS Grid创建Table例子
基于ExtJS Grid创建Table例子
24 1
|
JSON JavaScript 前端开发
79jqGrid - 行列总计
79jqGrid - 行列总计
39 0
|
前端开发
前端工作总结182-element-ui el-table sortable属性 参数详解
前端工作总结182-element-ui el-table sortable属性 参数详解
396 0
前端工作总结182-element-ui el-table sortable属性 参数详解
|
JavaScript 前端开发 数据格式
ExtJS 6 gridPanel绘制表格并填充数据的例子
Ext.grid.Panel 是表格,可以显示数据,我们来看看它的基本用法:View + Store + Model使用上述三个“部分”就可以完整的,最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI View部分的代码 Ext.
3065 0
|
JavaScript C# 数据格式
|
JavaScript
Extjs如何锁定Grid的列?
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
1146 0