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

duke6372

顶，支持楼主。

yygy

JS不怎样懂，能否写成一个方法调用，如calcGridSummary(grid,合计字段的ID);

直尺画圆

嗯，不错，代码有点多，能封装一下，设置个属性就可以显示出来就更好了，增加合计的数据事件，自己来写

delphi9

很好！学习一下！

冬天

官网上示例上没有吧？

yygy

留个记号

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>

复制代码

隨風往事

{:soso_e179:}

舞柯庶

{:soso_e179:}

sanshi

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

你想要这样的效果么：


这个也好办，晚上给例子