FineUI 官方论坛

标题: 【已解决】Grid底部合计行功能实现，绝对定位到表格底部！ [打印本页]
作者: ◇辉◆:    时间: 2012-9-20 08:10
标题: 【已解决】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 大家自己做个变量来控制把 防止合计重复加上去了 具体问题具体解决！
作者: 魔小涛    时间: 2013-3-18 00:52
防止合计重复加上去了 具体问题具体解决！
怎么实现？
作者: sanshi    时间: 2013-6-4 16:17
多谢，下个版本会增加几个示例，演示如果制作合计行。

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


[attach]2416[/attach]

[attach]2418[/attach]

需要写部分JS和CSS代码：
  1. <script>

  3.         var gridClientID = '<%= Grid1.ClientID %>';

  5.         function calcGridSummary(grid) {
  6.             var donateTotal = 0, store = grid.getStore(), view = grid.getView(), storeCount = store.getCount();

  8.             // 防止重复添加了合计行
  9.             if (Ext.get(view.getRow(storeCount - 1)).hasClass('mygrid-row-summary')) {
  10.                 return;
  11.             }

  13.             // 遍历每一行数据，计算汇总数据
  14.             store.each(function (record) {
  15.                 // 注：donate是列的ColumnID属性
  16.                 donateTotal += parseInt(record.data["donate"]);
  17.             });
  18.             var donateAvg = donateTotal / storeCount;


  21.             store.add(new Ext.data.Record({
  22.                 'major': '合计：',
  23.                 'donate': donateTotal
  24.             }));

  26.             store.add(new Ext.data.Record({
  27.                 'major': '平均：',
  28.                 'donate': donateAvg
  29.             }));


  32.             // 为合计行添加自定义样式（隐藏序号列、复选框列，取消 hover 和 selected 效果）
  33.             Ext.get(view.getRow(storeCount)).addClass('mygrid-row-summary');
  34.             Ext.get(view.getRow(storeCount + 1)).addClass('mygrid-row-summary');

  36.         }

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

  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.         }

  54.         // 页面AJAX回发后执行的函数
  55.         function onAjaxReady() {
  56.             var grid = X(gridClientID);
  57.             calcGridSummary(grid);
  58.         }
  59.     </script>
复制代码
作者: 冬天    时间: 2013-6-4 17:03
能显示在分页条的那里，有本页合计和总合计，就完美了。
作者: sanshi    时间: 2013-6-4 17:59
冬天 发表于 2013-6-4 17:03
能显示在分页条的那里，有本页合计和总合计，就完美了。


你想要这样的效果么：
[attach]2419[/attach]

这个也好办，晚上给例子
作者: 舞柯庶    时间: 2013-6-4 18:19
{:soso_e179:}
作者: 隨風往事    时间: 2013-6-4 20:54
{:soso_e179:}
作者: sanshi    时间: 2013-6-6 17:02
又增加了一个示例：-增加合计行绝对定位到分页条上方的示例grid/grid_summary_absolute.aspx。

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

[attach]2433[/attach]

  2. <script>

  4.         var gridClientID = '<%= Grid1.ClientID %>';
  5.         var gridSummaryID = '<%= hfGrid1Summary.ClientID %>';

  7.         function calcGridSummary(grid) {
  8.             var donateTotal = 0, store = grid.getStore(), view = grid.getView(), storeCount = store.getCount();

  10.             // 防止重复添加了合计行
  11.             if (Ext.get(view.getRow(storeCount - 1)).hasClass('mygrid-row-summary')) {
  12.                 return;
  13.             }

  15.             // 从隐藏字段获取全部数据的汇总
  16.             var summaryJSON = JSON.parse(Ext.getCmp(gridSummaryID).getValue());


  19.             store.add(new Ext.data.Record({
  20.                 'major': '全部合计：',
  21.                 'donate': summaryJSON['donateTotal'].toFixed(2),
  22.                 'fee': summaryJSON['feeTotal'].toFixed(2)
  23.             }));


  26.             // 为合计行添加自定义样式（隐藏序号列、复选框列，取消 hover 和 selected 效果）
  27.             var summaryNode = Ext.get(view.getRow(storeCount)).addClass('mygrid-row-summary');

  29.             // 找到合计行的外部容器节点
  30.             var viewportNode = summaryNode.parent('.x-grid3-viewport');
  31.             // 删除容器节点下直接子节点为 mygrid-row-summary 的节点
  32.             viewportNode.select('> .mygrid-row-summary').remove();

  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.             });

  43.             // 向容器节点添加合计行的副本
  44.             viewportNode.appendChild(cloneSummaryNode);
  45.        
  46.         }

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

  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.         }

  64.         // 页面AJAX回发后执行的函数
  65.         function onAjaxReady() {
  66.             var grid = X(gridClientID);
  67.             calcGridSummary(grid);
  68.         }
  69.     </script>
复制代码
作者: yygy    时间: 2013-6-6 17:24
留个记号
作者: 冬天    时间: 2013-6-6 18:49
官网上示例上没有吧？
作者: delphi9    时间: 2013-6-7 07:49
很好！学习一下！
作者: 直尺画圆    时间: 2013-6-7 08:57
嗯，不错，代码有点多，能封装一下，设置个属性就可以显示出来就更好了，增加合计的数据事件，自己来写
作者: yygy    时间: 2013-6-7 09:04
JS不怎样懂，能否写成一个方法调用，如calcGridSummary(grid,合计字段的ID);

作者: duke6372    时间: 2013-6-7 11:34
顶，支持楼主。
作者: asp.net    时间: 2013-6-8 10:23
顶，JS还是不行，只能拿现成的用了
作者: 雷哥哥    时间: 2013-6-11 09:42
支持下，准备拿现成的使用。
作者: 隨風往事    时间: 2013-6-11 15:23

顶，JS还是不行，只能拿现成的用了
作者: 清风醉    时间: 2013-6-27 21:31
感谢sanshi,就是美化一些就好了,底色什么的调整一下,有列分隔线就完美了
作者: delphi9    时间: 2013-7-1 09:23
为什么我的合计行把最下面一行占用了？
如果只有一条记录,则不显示记录,仅显示合计
如果两条记录,这只显示一条记录加合计行
作者: delphi9    时间: 2013-7-1 10:08
知道是怎么回事了，成功了
function onAjaxReady() {
            var grid = X(gridClientID);
            highlightRows();
            calcGridSummary(grid);
        }
作者: jiao_lp    时间: 2013-9-13 19:10
确实好用，但在XP里grid里数据没了，但汇总结果显示有。而且其他不使用汇总的页面却正常显示。
作者: shouzhi2007    时间: 2014-4-1 13:49
好,,,                  
作者: look250666    时间: 2019-12-7 14:30
官网上的表格合计行，改成平均数，需要注意哪些问题



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4