是否可以在表格中設置一行的背景顏色?當條件適用時,我需要突出顯示一行。在< tr font="...">...< /tr>
的地方可以指定「字體」屬性。 (我需要整行被突出顯示)。Qooxdoo中的桌面裝飾
4
A
回答
3
您必須繼承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的數字的行。
問候, 馬丁
1
這裏有一個版本馬丁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 });
相關問題
- 1. 我該如何讓qooxdoo的「border-invalid」裝飾器更厚?
- 2. 中如何作爲的Qooxdoo桌面製作HTML編輯
- 3. Qooxdoo:在移動應用程序中重用桌面類
- 4. 餐桌裝飾無法工作
- 5. 放大qooxdoo桌面上的屏幕,捏一下
- 6. 裝飾裝飾器
- 7. 如何裝飾WPF面板?
- 8. 在Python中裝飾裝飾器
- 9. Python裝飾3.0和裝飾的參數
- 10. 裝飾物是裝飾物的屬性?
- 11. 當通過遠程桌面共享查看時,未修飾的JInternalFrame變爲裝飾
- 12. KeeWeb桌面安裝錯誤
- 13. 如何在裝飾器中重用TypeScript中的裝飾器
- 14. 如何在qooxdoo桌面應用程序中設置瀏覽器窗口標題?
- 15. Python的 - 裝飾
- 16. 裝飾在Java中
- 17. Python中的裝飾器必須實現裝飾器模式嗎?
- 18. 裝飾django發佈保存在裝飾器中的模型類
- 19. Angular中的單元測試裝飾器,裝飾$ log服務
- 20. python中的裝飾器
- 21. 類中的裝飾器
- 22. VOLTTRON中的Core.schedule裝飾器
- 23. WinForms中的WPF裝飾者
- 24. Silverlight中的Tab裝飾
- 25. ES7中的類裝飾器
- 26. TreeViewer中的項目裝飾
- 27. 裝飾軌中的屬性
- 28. C++中的裝飾模式
- 29. 裝飾模式裝飾器限制
- 30. WPF裝飾者與定製裝飾者?
馬丁,我覺得這是太多的代碼在說明對大多數人。你可以更好地把它放在Playground網址中,並在答案中只提供重要的片段。 – ThomasH 2010-01-21 09:26:58
該代碼不在操場上工作。請查看代碼並修復它。這個.__顏色是不確定的。 – user249331 2010-01-21 20:39:29
代碼太多,不起作用。 – 2011-10-04 12:07:42