FineUI 官方论坛

标题: FineUI4合计行JS版本不能防止重复添加合计行 [打印本页]

作者: tarcyshu 时间: 2015-5-22 13:09
标题: FineUI4合计行JS版本不能防止重复添加合计行
用户要求在表格中添加两个合计行，我在DEMO中似乎没有找到相关的实例。
于是参考http://www.fineui.com/bbs/forum. ... tid=1574&highlight=合计行
中的FineUI3的合计行JS版本改写如下，因为对ExtJS还处于摸索阶段，在防止重复添加合计行
那里卡住了，表格中显示的合计行出现重复添加的情况，请大家帮忙看看是哪里写的有问题，多谢了！
<script src="../res/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

      var gridClientID = '<%= Grid2.ClientID %>';

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

         // 防止重复添加了合计行
         //if (Ext.get(view.getNode(storeCount - 1)).hasClass('mygrid-row-summary')) {
         // return;
         //}
         //console.log(view.getNode(storeCount - 1));
         console.log(0);

         if ($(view.getNode(0)).hasClass('mygrid-row-summary'))
         {
            console.log(2);
            return;
         }

         // 遍历每一行数据，计算汇总数据
         store.each(function (record) {
            // 注：donate是列的ColumnID属性
            if (record.get('TOTALb') == '保税区')
            {
                  G001bTotal += parseInt(record.data["G001b"]);

            }
         });

         Ext.regModel('pen', {
            fields: [{
                  name: 'TOTALb',
                  type: 'string'
            }, {
                  name: 'G001b',
                  type: 'auto'
            }, {
                  name: 'G002b',
                  type: 'auto'
            }, {
                  name: 'G003b',
                  type: 'auto'
            }, {
                  name: 'G004b',
                  type: 'auto'
            }],

         });

         var p = new pen({
            TOTALb: '保税区合计',
            G001b: G001bTotal,
            G002b: G001bTotal,
            G003b: G001bTotal,
            G004b: G001bTotal
         });
         console.log(1);
         store.insert(0, p);
         //store.add(p);
         // 为合计行添加自定义样式（隐藏序号列、复选框列，取消 hover 和 selected 效果）
         $(view.getNode(0)).addClass('mygrid-row-summary');
         console.log(view.getNode(0));
         console.log(3);
      }
      // 页面第一个加载完毕后执行的函数
      F.ready(function () {
         var grid = F(gridClientID);
         grid.addListener('viewready', function () {
            calcGridSummary(grid);
         });

         // 防止选中合计行
         grid.getSelectionModel().addListener('beforerowselect', function (sm, rowIndex, keepExisting, record) {
            if ($(view.getNode(0)).hasClass('mygrid-row-summary')) {
                  return false;
            }
            return true;
         });
         console.log('ready');
      });

      // 页面AJAX回发后执行的函数
      F.ajaxReady(function () {

         var grid = F(gridClientID);
         calcGridSummary(grid);
         console.log('ajaxReady');
      });

</script>

作者: tarcyshu 时间: 2015-5-22 13:10
Grid2的内容：
<f:Tab ID="Tab2" Title="按区域" runat="server" Layout="Fit">
                        <Items>
                              <f:Grid ID="Grid2" ShowBorder="true" ShowHeader="false" runat="server" EnableFrame="false" EnableCollapse="false"
                                 EnableTextSelection="true" EnableColumnLines="true"
                                 EnableSummary="true" SummaryPosition="Top">
                                 <Columns>
                                    <f:RowNumberField EnablePagingNumber="true" Width="30px" />
                                    <f:BoundField DataField="grp" ColumnID="TOTALb" HeaderText="区域" TextAlign="Center" Width="200px" />
                                    <f:BoundField DataField="G001" ColumnID="G001b" HeaderText="新批企业个数" TextAlign="Center" />
                                    <f:BoundField DataField="G002" ColumnID="G002b" HeaderText="投资总额(万美元)" TextAlign="Right" DataFormatString="{0:F}" Width="130px" />
                                    <f:BoundField DataField="G003" ColumnID="G003b" HeaderText="注册资本(万美元)" TextAlign="Right" DataFormatString="{0:F}" Width="130px" />
                                    <f:BoundField DataField="G004" ColumnID="G004b" HeaderText="合同外资(万美元)" TextAlign="Right" DataFormatString="{0:F}" Width="130px" />

                                 </Columns>
                              </f:Grid>
                        </Items>
                     </f:Tab>

作者: tarcyshu 时间: 2015-5-22 13:10
CSS的内容：
<style>
      .x-grid-row-summary .x-grid-cell-inner {
         font-weight: bold;
         color: red;
      }

      .x-tab-default-top .x-tab-inner {
         height: 14px !important;
         line-height: 14px !important;
      }
      .mygrid-row-summary.x-grid3-row
      {
         background-color: #efefef !important;
         background-image: none !important;
         border-color: #fff #ededed #ededed !important;
      }
      .mygrid-row-summary.x-grid3-row .x-grid3-td-numberer, .mygrid-row-summary.x-grid3-row .x-grid3-td-checker
      {
         background-image: none !important;
      }
      .mygrid-row-summary.x-grid3-row .x-grid3-td-numberer .x-grid3-col-numberer, .mygrid-row-summary.x-grid3-row .x-grid3-td-checker .x-grid3-col-checker
      {
         display: none;
      }
      .mygrid-row-summary.x-grid3-row td
      {
         font-size: 14px;
         line-height: 16px;
         font-weight: bold;
         color: red;
      }
</style>

作者: 飞↑草 时间: 2015-5-22 16:31
本帖最后由飞↑草于 2015-5-22 16:38 编辑

敬佩下LZ的霸气~

作者: tarcyshu 时间: 2015-5-22 17:12

飞↑草发表于 2015-5-22 16:31
敬佩下LZ的霸气~

啊？！咋啦。。。。。

作者: 飞↑草 时间: 2015-5-25 08:47

tarcyshu 发表于 2015-5-22 17:12
啊？！咋啦。。。。。

我只会后台弄，不会JS拉

作者: tarcyshu 时间: 2015-5-25 09:49

飞↑草发表于 2015-5-25 08:47
我只会后台弄，不会JS拉

后台fineui只能返回一条合计行吧？或者用SQL弄？

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)