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

여기 (테스트 1.6) 놀이터에서 작동 마틴 Wittemann의 대답의 버전입니다 :

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