在 qx.ui.table.Table 中为列添加摘要行
Add summary row in qx.ui.table.Table for column
如何向 qx.ui.table.Table
添加摘要行以显示列的总计。
目前唯一的想法是合并两个 table,一个是数据,一个是总数。有没有更优雅的方式来处理这个问题?
编辑
table 与 qx.ui.table.model.Simple
as 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);
如何向 qx.ui.table.Table
添加摘要行以显示列的总计。
目前唯一的想法是合并两个 table,一个是数据,一个是总数。有没有更优雅的方式来处理这个问题?
编辑
table 与 qx.ui.table.model.Simple
as 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);