javascript - Decoración de mesa en Qooxdoo

html-table row

Question

¿Es posible establecer el color de fondo de una fila en una tabla? Necesito resaltar una fila cuando se aplica una condición. Algo con el efecto de < tr font="...">...< /tr> donde puedo especificar los atributos de "fuente". (Necesito que se resalte toda la fila).

Answer 1

tiene que subclasificar el renderizador de fila predeterminado qooxdoo para que eso suceda. Eche un vistazo al siguiente código que puede probar en el patio de juegos qooxdoo. Te muestra cómo hacerlo.

 function createRandomRows(rowCount) {
var rowData = [];
var now = new Date().getTime();
var nextId = 0;
for (var row = 0; row < rowCount; row++) {
rowData.push([ nextId++, Math.random() * 10000]);
}
return rowData;
}
// window
var win = new qx.ui.window.Window("Table").set({
layout : new qx.ui.layout.Grow(),
contentPadding: 0
});
this.getRoot().add(win);
win.open();
// table model
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "A number" ]);
tableModel.setData(createRandomRows(10000));
// table
var table = new qx.ui.table.Table(tableModel).set({decorator: null})
/**
* New row renderer!
*/
qx.Class.define("condRow", {
extend : qx.ui.table.rowrenderer.Default,
members : {
// overridden
updateDataRowElement : function(rowInfo, rowElem)
{
this.base(arguments, rowInfo, rowElem);
var style = rowElem.style;
if (!(rowInfo.focusedRow && this.getHighlightFocusRow()) && !rowInfo.selected) {
style.backgroundColor = (rowInfo.rowData[1] > 5000) ? this.__colors.bgcolEven : this.__colors.bgcolOdd;
}
},
// overridden
createRowStyle : function(rowInfo)
{
var rowStyle = [];
rowStyle.push(";");
rowStyle.push(this.__fontStyleString);
rowStyle.push("background-color:");
if (rowInfo.focusedRow && this.getHighlightFocusRow())
{
rowStyle.push(rowInfo.selected ? this.__colors.bgcolFocusedSelected : this.__colors.bgcolFocused);
}
else
{
if (rowInfo.selected)
{
rowStyle.push(this.__colors.bgcolSelected);
}
else
{
// here is the second magic
rowStyle.push((rowInfo.rowData[1] > 5000) ? this.__colors.bgcolEven : this.__colors.bgcolOdd);
}
}
rowStyle.push('';color:'');
rowStyle.push(rowInfo.selected ? this.__colors.colSelected : this.__colors.colNormal);
rowStyle.push('';border-bottom: 1px solid '', this.__colors.horLine);
return rowStyle.join("");
},
}
});
table.setDataRowRenderer(new condRow(table));
win.add(table);

En la parte inferior del código, verá el nuevo procesador de filas que marca todas las filas que tienen un número mayor que 5000 en la segunda columna.

Saludos, Martin

Answer 2

Aquí hay una versión de la respuesta de Martin Wittemann que funciona en el patio de recreo (1.6 probado):

/** This renderer makes rows matching our conditions appear as different colours */
qx.Class.define("CustomRowRenderer", {
extend : qx.ui.table.rowrenderer.Default,
members : {
/** Overridden to handle our custom logic for row colouring */
updateDataRowElement : function(rowInfo, rowElem) {
// Call super first
this.base(arguments, rowInfo, rowElem);
// Get the current style
var style = rowElem.style;
// Don''t overwrite the style on the focused / selected row
if (!(rowInfo.focusedRow && this.getHighlightFocusRow()) && !rowInfo.selected) {
// Apply our rule for row colouring
style.backgroundColor = (rowInfo.rowData[1] > 5000) ? this._colors.bgcolEven : this._colors.bgcolOdd;
}
},
/** Overridden to handle our custom logic for row colouring */
createRowStyle : function(rowInfo) {
// Create some style
var rowStyle = [];
rowStyle.push(";");
rowStyle.push(this.__fontStyleString);
rowStyle.push("background-color:");
// Are we focused?
if (rowInfo.focusedRow && this.getHighlightFocusRow()) {
// Handle the focused / selected row as normal
rowStyle.push(rowInfo.selected ? this._colors.bgcolFocusedSelected : this._colors.bgcolFocused);
} else {
// Aew we selected?
if (rowInfo.selected) {
// Handle the selected row as normal
rowStyle.push(this._colors.bgcolSelected);
} else {
// Apply our rule for row colouring
rowStyle.push((rowInfo.rowData[1] > 5000) ? this._colors.bgcolEven : this._colors.bgcolOdd);
}
}
// Finish off the style string
rowStyle.push('';color:'');
rowStyle.push(rowInfo.selected ? this._colors.colSelected : this._colors.colNormal);
rowStyle.push('';border-bottom: 1px solid '', this._colors.horLine);
return rowStyle.join("");
}
}
});
// Demo table
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "Number" ]);
tableModel.setData([
[1, 5000],
[1, 6000],
[1, 6000],
[1, 6000],
[1, 6000],
[1, 4000],
[1, 4000],
[1, 4000],
[1, 6000]
]);
var table = new qx.ui.table.Table(tableModel);
// Apply our renderer
table.setDataRowRenderer(new CustomRowRenderer(table));
// Add table
this.getRoot().add(table, { left : 10, top : 10 });