实现分组小计

REPORT  ZALV_SAMPLE_03.
*---type pools
TYPE-POOLS: slis.
*---internal tables
DATABEGIN OF it_flight OCCURS 0,
       carrid  LIKE sflight-carrid,
       connid   LIKE sflight-connid,
       fldate   LIKE sflight-fldate,
       seatsmax LIKE sflight-seatsmax,
       seatsocc LIKE sflight-seatsocc,
      END OF it_flight,
*--internal tables for alv
      it_fieldcat TYPE  slis_t_fieldcat_alv,
      wa_fcat LIKE LINE OF it_fieldcat,
      layout TYPE  slis_layout_alv,
      it_sort type  slis_t_sortinfo_alv,
      wa_sort like line of it_sort.
*---start-of-selection .
      START-OF-SELECTION.
  CALL FUNCTION 'REUSE_ALV_FIELDCATALOG_MERGE'
  EXPORTING
    i_program_name         = sy-repid
    i_internal_tabname     = 'IT_FLIGHT'
    i_inclname             = sy-repid
  CHANGING
    ct_fieldcat            = it_fieldcat
  EXCEPTIONS
    inconsistent_interface = 1
    program_error          = 2.
*----get data
  SELECT carrid
         connid
         fldate
         seatsmax
         seatsocc
   FROM sflight
   INTO CORRESPONDING FIELDS OF TABLE it_flight
   UP TO 20 ROWS.
  .
  wa_fcat-do_sum = 'X'.
  MODIFY it_fieldcat FROM wa_fcat TRANSPORTING do_sum
   WHERE fieldname = 'SEATSOCC' .
  wa_sort-fieldname = 'CARRID'.
  wa_sort-group = 'UL'.
  wa_sort-up = 'X'.
  APPEND wa_sort TO it_sort.
  wa_sort-fieldname = 'CONNID'.
  wa_sort-subtot = 'X'.
  wa_sort-up = 'X'.
  APPEND wa_sort TO it_sort.
  CALL FUNCTION 'REUSE_ALV_LIST_DISPLAY'
    EXPORTING
      i_callback_program = sy-repid
      is_layout          = layout
      it_fieldcat        = it_fieldcat
      it_sort            = it_sort
    TABLES
      t_outtab           = it_flight
    EXCEPTIONS
      program_error      = 1.  
Bootstrap Table 可以通过 `footerFormatter` 属性来实现对数据的分组小计。具体实现方法如下: 1. 在表格中添加 `data-show-footer="true"` 属性,开启表格底部显示功能。 2. 在列定义中,添加 `footerFormatter` 属性,指定小计的计算方法。 3. 在 `columns` 属性中,将需要分组的列名添加到 `group` 数组中。 4. 在 `onPostBody` 事件中,使用 JavaScript 对表格数据进行分组小计。 5. 将计算结果填充到表格底部的小计行中。 下面是一个示例代码: ```html <table id="myTable" data-show-footer="true"> <thead> <tr> <th data-field="name">姓名</th> <th data-field="age">年龄</th> <th data-field="score" data-footer-formatter="sumFormatter">分数</th> </tr> </thead> </table> <script> var data = [ {name: '张三', age: 20, score: 80}, {name: '李四', age: 22, score: 90}, {name: '王五', age: 21, score: 85}, {name: '赵六', age: 20, score: 75}, {name: '孙七', age: 22, score: 95}, {name: '周八', age: 21, score: 88} ]; // 在列定义中指定小计的计算方法 function sumFormatter(data) { var total = 0; for (var i = 0; i < data.length; i++) { total += data[i].score; } return total; } // 在 onPostBody 事件中进行分组小计 $('#myTable').on('post-body.bs.table', function () { var $table = $(this); var group = ['age']; // 按年龄分组 var columns = $table.bootstrapTable('getVisibleColumns'); // 获取可见列 var footerData = {}; // 存储小计数据 for (var i = 0; i < data.length; i++) { var row = data[i]; var groupKey = ''; for (var j = 0; j < group.length; j++) { groupKey += row[group[j]] + '-'; } groupKey = groupKey.slice(0, -1); // 去除最后一个 '-' if (!footerData[groupKey]) { footerData[groupKey] = {}; for (var k = 0; k < columns.length; k++) { var field = columns[k].field; footerData[groupKey][field] = 0; } } for (var k = 0; k < columns.length; k++) { var field = columns[k].field; footerData[groupKey][field] += row[field]; } } // 填充小计数据 var $footerRow = $table.find('tfoot tr'); for (var i = 0; i < columns.length; i++) { var field = columns[i].field; if (field in footerData) { $footerRow.find('td[data-field="' + field + '"]').text(footerData[field][field]); } } }); $('#myTable').bootstrapTable({ data: data, columns: [{ field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'score', title: '分数', footerFormatter: 'sumFormatter' }] }); </script> ``` 这样,就可以在表格底部显示分组小计了。注意,由于 Bootstrap Table 是基于 jQuery 的,因此需要先引入 jQuery 库和 Bootstrap Table 库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值