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

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
能显示在分页条的那里，有本页合计和总合计，就完美了。

你想要这样的效果么：


这个也好办，晚上给例子

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>

复制代码