Украшение стола в Qooxdoo

Question

Можно ли установить цвет фона одной строки в таблице? Мне нужно выделить строку, когда условие применяется. Что-то с эффектом < tr font="...">...< /tr>, где я могу указать атрибуты "font". (Мне нужно, чтобы весь ряд был выделен).

Answer 1

Вы должны создать подкласс средства рендеринга строк по умолчанию qooxdoo, чтобы это произошло. Посмотрите на следующий код, который вы можете протестировать на игровой площадке qooxdoo. Он показывает вам, как это сделать.

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

В нижней части кода вы видите новый рендер, который помечает все строки, имеющие число больше 5000 во втором столбце.

С уважением, Martin

Answer 2

Вот вариант ответа Мартина Виттеманна, который работает на детской площадке (1.6 протестировано):

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