此板上已经讨论过更改Dojo DataGrid行背景的主题以及Dojo文档,它提供了一个完整的示例(http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html)。
我的问题有点不同。我需要根据公共字段更改行的背景颜色 - 让我们称之为“CityId”。如果两行具有相同的CityId,则它们应具有相同的背景。请注意,此问题与网格中数据的分组或排序无关,只与更改共享公共ID字段的相邻行的行样式有关。
这个问题的两个主要途径是要么挂钩' onStyleRow'事件或私人' _onFetchComplete'事件
这是我的onStyleRow尝试:
var idx = 0;
var prevId = 0;
function myStyleRow(row) {
var item = grid.getItem(row.index);
if(item) {
var currId = store.getValue(item, "CityId", null);
if ( !!currId ) {
if ( prevId != currId ) {
prevId = currId;
idx++;
}
if ( idx%2 == 0 ) {
row.customStyles += 'background-color:#FFF000;';
} else {
//row.customStyles += 'background-color:#000;';
}
}
}
grid.focus.styleRow(row);
grid.edit.styleRow(row);
}
在网格创建期间调用其他参数
grid = new dojox.grid.DataGrid({onStyleRow:myStyleRow});
此方法不稳定的原因是因为onStyleRow事件在鼠标悬停时被触发,导致由于prevId值而重新绘制行。我想知道是否/如何禁止onStyleRow触发鼠标悬停。这将解决我的问题。
在_onFetchComplete方法中,我试图找到一种访问网格行的方法。这是我的代码:
var idx = 0;
var prevId = 0;
grid.connect(grid, '_onFetchComplete', function() {
// wait until everything is loaded
for (var i in grid._pending_requests) {
if (grid._pending_requests[i]) {
return;
}
}
// parse through row data
for ( var j=0; j < grid.rowCount; j++) {
var item = grid.getItem(j);
if(item) {
var currId = store.getValue(item, "CityId", null);
if ( !!currId ) {
if ( prevId != currId ) {
prevId = currId;
idx++;
}
if ( idx%2 == 0 ) {
row.customStyles += 'background-color:#FFF000;';
} else {
//row.customStyles += 'background-color:#000;';
}
}
}
}
});
这显然是一项正在进行中的工作,因为有两个缺点:迭代网格行的方法(grid.rowCount无法正常工作)以及获取网格行的方法为了应用自定义样式。我找不到类似grid.getRow()的东西来解决这个问题。
任何指针都表示赞赏。