javascript - Qooxdoo中的餐 table 装饰

Question

是否可以设置表格中一行的背景颜色？当条件适用时，我需要突出显示一行。效果为 < tr font="...">...< /tr>我可以在其中指定“字体”属性。 (我需要突出显示整行)。

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 的行。

问候，马丁