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

【问题标题】：changing row background in Dojo Datagrid from dynamic data从动态数据更改 Dojo Datagrid 中的行背景
【发布时间】：2014-04-18 11:18:41
【问题描述】：

更改 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() 的东西来解决这个问题。

感谢任何指针。

【问题讨论】：

我不确定您使用的是哪个版本的道场？调用 grid.on('StyleRow',myStyleRow); 可能会解决问题。 Vers.1.9 / dojo.connect('grid','onStyleRow',myStyleRow);定义网格后的事件，同时断开整个网格的onMouseover。问候
我采用了这种方法 - 但结果相似（不稳定）：dojo.connect(grid, 'onStyleRow', this, function (row) { var item = grid.getItem(row.index) ; ... });
如何断开 onMouseover 与网格的连接？
看看这里 - 该链接解释了如何断开鼠标事件：dojotoolkit.org/reference-guide/1.7/dojo/…
我已尝试多次尝试从网格中删除鼠标事件，但没有任何效果。你有一个例子吗？此外，我在网上看到的所有内容都涉及在鼠标悬停事件中隐藏网格背景，但它们不会禁用这些事件；他们使用 CSS 来改变格式，这不是我想要的。

标签： javascript datagrid dojo event-handling

【解决方案1】：

这是最终代码：

var idx = 0;
var prevId = 0;
var passing = {};
var color = {};
dojo.connect(grid, 'onStyleRow', this, function (row) {
    var item = grid.getItem(row.index);
    if(item) {
        var currId = store.getValue(item, "CityId", null);
        if ( !passing[currId] ) {
            passing[currId] = true;

            if ( prevId != currId ) {                       
                prevId = currId;
                idx++;
            }

            if ( idx%2 == 0 ) {
                row.customStyles += 'background-color:#FFF000;';
                color[currId] = 'background-color:#FFF000;';
            } else {
                row.customStyles += 'background-color:#F2F7F7;';
                color[currId] = 'background-color:#F2F7F7;';
            }
        } else {
            row.customStyles += color[currId];
        }
    }
});

'passing' 对象用于标记第一次通过行 - 这一点很重要，因为 'prevId' 值已正确更新。该代码适用于多次调用以将更多数据放入网格，因为“prevId”保持其完整性。 “颜色”对象保存为行背景记录的值。这是必需的，因为在鼠标悬停时会调用 onStyleRow 事件，这意味着每次都需要重新绘制。我希望这对其他人也有帮助。

【讨论】：