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 });