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

最佳答案

您必须继承 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 的所有行。

问候,
马丁

关于javascript - Qooxdoo的餐 table 装饰,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2104637/

10-12 05:33