Qooxdoo中的表格装饰

Question

是否可以设置表格中一行的背景颜色？当条件满足时，我需要突出显示一行。类似于<tr font="...">...</tr>，在其中我可以指定“font”属性。（我需要整行都被突出显示）。

- user249331

Answer 1

你需要创建一个qooxdoo默认行渲染器的子类来实现这一点。查看下面的代码，可以在qooxdoo playground中进行测试，它向您展示了如何操作。

    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 Wittemann

---

Martin，我认为这段代码对大多数人来说过于冗长了。你最好将其包装在Playground URL中，并在答案中仅提供必要的片段。 - ThomasH

代码在 playground 中无法运行。请检查代码并修复它。this.__colors 未定义。 - user249331

Answer 2

这是Martin Wittemann的答案版本，适用于playground（已测试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 });

- OrganicPanda