在 qx.ui.table.Table 中为列添加摘要行

Add summary row in qx.ui.table.Table for column

如何向 qx.ui.table.Table 添加摘要行以显示列的总计。

目前唯一的想法是合并两个 table,一个是数据,一个是总数。有没有更优雅的方式来处理这个问题?

编辑

table 与 qx.ui.table.model.Simpleas table 模型一起使用。

好吧,只要你使用qx.ui.table.model.Simple,你就可以计算汇总行并将其附加到数据数组,然后再传递给模型。或者您可以在模型 dataChanged 的侦听器中执行此操作。也可以子类化 qx.ui.table.rowrenderer.Default 以某种方式强调该行。

这里是示例,这里是 playground snippet:

qx.Class.define("app.SummaryRowRenderer", {

   extend : qx.ui.table.rowrenderer.Default,

   members : {

      // override
      getRowClass : function(rowInfo) 
      {
        var model          = rowInfo['table'].getTableModel();
        var isSummaryIndex = model.getColumnIndexById('_isSummary');
        return rowInfo['rowData'][isSummaryIndex] ? 'summary' : '';
      }

   },

   defer : function()
   {
    var entry = qx.bom.element.Style.compile({
      'backgroundColor' : '#ccc',
      'fontWeight'      : 'bold'
    });
    var sheet = qx.bom.Stylesheet.createElement();
    qx.bom.Stylesheet.addRule(sheet, '.summary .qooxdoo-table-cell', entry);
   }

});

var model = new qx.ui.table.model.Simple();
model.setColumns(
  [this.tr('Name'), this.tr('Value'), null], 
  ['name', 'value', '_isSummary']
);

var table = new qx.ui.table.Table(model);
table.set({
  'statusBarVisible'              : false,
  'columnVisibilityButtonVisible' : false,
  'showCellFocusIndicator'        : false,
  'dataRowRenderer'               : new app.SummaryRowRenderer()
}); 

table.getTableColumnModel().setColumnVisible(2, false);

this.getRoot().add(table, {'edge': 0});

var data = [
  {'name': 'foo', 'value': 10},
  {'name': 'bar', 'value': 100},
  {'name': 'baz', 'value': 1000},
  {'name': 'quz', 'value': 10000},
];


qx.event.Timer.once(function()
{
  var dataWithSummary = qx.lang.Array.clone(data);
  dataWithSummary.push(data.reduce(function(r, v)
  {
    r['value'] += v['value'];
    return r; 
  }, {'name': 'Summary', 'value': 0, '_isSummary': true}));
  model.setDataAsMapArray(data);
}, this, 1000);