从动态数据更改Dojo Datagrid中的行背景

时间:2014-03-13 15:30:28

标签: javascript datagrid dojo event-handling

此板上已经讨论过更改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()的东西来解决这个问题。

任何指针都表示赞赏。

0 个答案:

没有答案