【已解决】Grid底部合计行功能实现，绝对定位到表格底部！

◇辉◆:

<script type="text/javascript" language="javascript">
               var gridClientID = '<%= grid.ClientID %>';
           //浮点加法
           function accAdd(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
           }
           //合计函数Begin  
           function GridSum(grid) {
               var sum1 = 0;
               var sum2 = 0;
               var sum3 = 0;
               var sum4 = 0;
               var sum5 = 0;
               var sum6 = 0;
               //...有几个列需要合计就声明几个变量
               grid.store.each(function(record) {              //函数grid.store.each(record))相当于一个for循环，遍历整个record
                   sum1 = accAdd(record.data["test1"], sum1); //把test1列下面的所有值进行加和运算,注意点：test1是该列ColumnID属性 例：<ext:BoundField Width="70px" DataField="XXXXX" HeaderText="测试"  TextAlign="Center" ColumnID="test1" />
                   sum2 = accAdd(record.data["test2"], sum2); //把test2列下面的所有值进行加和运算
                   sum3 = accAdd(record.data["test3"], sum3);
                   sum4 = accAdd(record.data["test4"], sum4);
                   sum5 = accAdd(record.data["test5"], sum5);
                   sum6 = accAdd(record.data["test6"], sum6);
               });
               //sum1 = addComma(sum1);
               var p = new Ext.data.Record(
                 {
                     "OrderDateField": '合计',
                     "test1": sum1,  //把test1列与合计后得到的值对应起来
                     "test2": sum2,   //把test2列与合计后得到的值对应起来
                     "test3": sum3,
                     "test4": sum4,
                     "test5": sum5,
                     "test6": sum6
                 }
               );
               //grid.store.insert(0, p); // 插入到当前页的第一行
               grid.store.insert(grid.getStore().getCount(), p);  //插入到当前页的最后一行，函数 grid.getStore().getCount()用来获得当前页的记录行数
              //具体放哪一行 自己选择


               //改变改行颜色。。。。。。。。x-grid-cell-inner为CSS样式 大家自己写就行了
               var row = grid.getView().getRow(grid.getStore().getCount() - 1);
               Ext.get(row).first().addClass("x-grid-cell-inner");
           }
           //合计函数End


           // 页面第一个加载完毕后执行的函数
           function onReady() {
               var grid = X(gridClientID);
               grid.addListener('viewready', function() {
                GridSum(grid);
               });
           }

           // 页面AJAX回发后执行的函数
           function onAjaxReady() {
               var grid = X(gridClientID);
               GridSum(grid);

           }
       </script>


在分页时，或者绑定行有触发OnRowCommand时。都会触发onAjaxReady这个JS 大家自己做个变量来控制把 防止合计重复加上去了 具体问题具体解决！

舞柯庶

{:soso_e179:}

魔小涛

防止合计重复加上去了 具体问题具体解决！
怎么实现？

sanshi

多谢，下个版本会增加几个示例，演示如果制作合计行。

-增加合计行示例grid/grid_summary.aspx（◇辉◆:）。
-增加服务器端合计行示例grid/grid_summary_serverside.aspx（◆◇提拉米苏℡）。






需要写部分JS和CSS代码：

1. <script>
   
2. 
   
3.         var gridClientID = '<%= Grid1.ClientID %>';
   
4. 
   
5.         function calcGridSummary(grid) {
   
6.             var donateTotal = 0, store = grid.getStore(), view = grid.getView(), storeCount = store.getCount();
   
7. 
   
8.             // 防止重复添加了合计行
   
9.             if (Ext.get(view.getRow(storeCount - 1)).hasClass('mygrid-row-summary')) {
   
10.                 return;
    
11.             }
    
12. 
    
13.             // 遍历每一行数据，计算汇总数据
    
14.             store.each(function (record) {
    
15.                 // 注：donate是列的ColumnID属性
    
16.                 donateTotal += parseInt(record.data["donate"]);
    
17.             });
    
18.             var donateAvg = donateTotal / storeCount;
    
19. 
    
20. 
    
21.             store.add(new Ext.data.Record({
    
22.                 'major': '合计：',
    
23.                 'donate': donateTotal
    
24.             }));
    
25. 
    
26.             store.add(new Ext.data.Record({
    
27.                 'major': '平均：',
    
28.                 'donate': donateAvg
    
29.             }));
    
30. 
    
31. 
    
32.             // 为合计行添加自定义样式（隐藏序号列、复选框列，取消 hover 和 selected 效果）
    
33.             Ext.get(view.getRow(storeCount)).addClass('mygrid-row-summary');
    
34.             Ext.get(view.getRow(storeCount + 1)).addClass('mygrid-row-summary');
    
35. 
    
36.         }
    
37. 
    
38.         // 页面第一个加载完毕后执行的函数
    
39.         function onReady() {
    
40.             var grid = X(gridClientID);
    
41.             grid.addListener('viewready', function () {
    
42.                 calcGridSummary(grid);
    
43.             });
    
44. 
    
45.             // 防止选中合计行
    
46.             grid.getSelectionModel().addListener('beforerowselect', function (sm, rowIndex, keepExisting, record) {
    
47.                 if (Ext.get(grid.getView().getRow(rowIndex)).hasClass('mygrid-row-summary')) {
    
48.                     return false;
    
49.                 }
    
50.                 return true;
    
51.             });
    
52.         }
    
53. 
    
54.         // 页面AJAX回发后执行的函数
    
55.         function onAjaxReady() {
    
56.             var grid = X(gridClientID);
    
57.             calcGridSummary(grid);
    
58.         }
    
59.     </script>

复制代码

冬天

能显示在分页条的那里，有本页合计和总合计，就完美了。

sanshi

冬天 发表于 2013-6-4 17:03
能显示在分页条的那里，有本页合计和总合计，就完美了。

你想要这样的效果么：


这个也好办，晚上给例子

隨風往事

{:soso_e179:}

sanshi

又增加了一个示例：-增加合计行绝对定位到分页条上方的示例grid/grid_summary_absolute.aspx。

这个效果可能是很多网友想要的，即使出现滚动条也能一眼看到合计行，不过实现需要一定的技巧。

1. 
   
2. <script>
   
3. 
   
4.         var gridClientID = '<%= Grid1.ClientID %>';
   
5.         var gridSummaryID = '<%= hfGrid1Summary.ClientID %>';
   
6. 
   
7.         function calcGridSummary(grid) {
   
8.             var donateTotal = 0, store = grid.getStore(), view = grid.getView(), storeCount = store.getCount();
   
9. 
   
10.             // 防止重复添加了合计行
    
11.             if (Ext.get(view.getRow(storeCount - 1)).hasClass('mygrid-row-summary')) {
    
12.                 return;
    
13.             }
    
14. 
    
15.             // 从隐藏字段获取全部数据的汇总
    
16.             var summaryJSON = JSON.parse(Ext.getCmp(gridSummaryID).getValue());
    
17. 
    
18. 
    
19.             store.add(new Ext.data.Record({
    
20.                 'major': '全部合计：',
    
21.                 'donate': summaryJSON['donateTotal'].toFixed(2),
    
22.                 'fee': summaryJSON['feeTotal'].toFixed(2)
    
23.             }));
    
24. 
    
25. 
    
26.             // 为合计行添加自定义样式（隐藏序号列、复选框列，取消 hover 和 selected 效果）
    
27.             var summaryNode = Ext.get(view.getRow(storeCount)).addClass('mygrid-row-summary');
    
28. 
    
29.             // 找到合计行的外部容器节点
    
30.             var viewportNode = summaryNode.parent('.x-grid3-viewport');
    
31.             // 删除容器节点下直接子节点为 mygrid-row-summary 的节点
    
32.             viewportNode.select('> .mygrid-row-summary').remove();
    
33. 
    
34.             // 创建合计行的副本
    
35.             var cloneSummaryNode = summaryNode.dom.cloneNode(true);
    
36.             // 修改合计行的副本的样式，绝对定位，距离底部0px，显示副本（默认是占位隐藏 visibility: hidden;）
    
37.             Ext.get(cloneSummaryNode).setStyle({
    
38.                 position: 'absolute',
    
39.                 bottom: 0,
    
40.                 visibility: 'visible'
    
41.             });
    
42. 
    
43.             // 向容器节点添加合计行的副本
    
44.             viewportNode.appendChild(cloneSummaryNode);
    
45.        
    
46.         }
    
47. 
    
48.         // 页面第一个加载完毕后执行的函数
    
49.         function onReady() {
    
50.             var grid = X(gridClientID);
    
51.             grid.addListener('viewready', function () {
    
52.                 calcGridSummary(grid);
    
53.             });
    
54. 
    
55.             // 防止选中合计行
    
56.             grid.getSelectionModel().addListener('beforerowselect', function (sm, rowIndex, keepExisting, record) {
    
57.                 if (Ext.get(grid.getView().getRow(rowIndex)).hasClass('mygrid-row-summary')) {
    
58.                     return false;
    
59.                 }
    
60.                 return true;
    
61.             });
    
62.         }
    
63. 
    
64.         // 页面AJAX回发后执行的函数
    
65.         function onAjaxReady() {
    
66.             var grid = X(gridClientID);
    
67.             calcGridSummary(grid);
    
68.         }
    
69.     </script>

复制代码

yygy

留个记号

冬天

官网上示例上没有吧？