Qooxdoo中的桌面装饰

Question

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

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

问候， 马丁

Answer 2

这里有一个版本马丁Wittemann的回答是，在（测试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 });