Question

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

唯一的想法是将两个表组合在一起，一个表与数据表，另一个表与总表。我有什么更优雅的方式来处理这个问题吗？

修改

该表与qx.ui.table.model.Simple一起用作表格模型。

Answer 1

好吧，只要您使用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);

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

1 个答案: