Question

我根据列中的值设置网格行样式。

在初始加载时看起来没问题，但是，当我点击标题进行排序时，样式遵循原始样式并且不会反映排序列表中的值。

在执行样式覆盖的 onStyleRow 事件中，我可以获取网格的行对象，但是...如何从行中获取列数据以便我可以正确设计。

我已经完成了下面的两个问题以及StackOverflow中的其他几个问题，Google搜索，检查了Dojo API文档和参考等等。到目前为止还没有结果......

dojox DataGrid onStyleRow works first time, then not again

dojo datagrid custom sorting server side

我附上下面的工作代码，您可以剪切并粘贴到html文件中运行并查看我面临的问题（以下代码中的 //// 注释是关键位置注释）。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/tundraGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="async:true,isDebug:true,parseOnLoad:true"></script>
<script>        
var grid_report;
require([ 'dojo/parser', 'dojox/grid/DataGrid', 'dojox/data/CsvStore', 'dojo/domReady!' ],  function(){
dojo.ready(function(){
    var csvData = "id,val\n";
    csvData += "1,10\n" + "2,20\n" + "3,30\n" + "4,40\n" + "5,50\n" + "6,60\n";
    var csv_store = new dojox.data.CsvStore({identifier: "id", data: csvData});

    grid_report = new dojox.grid.DataGrid({
        style:'height:400px',
        store: csv_store,
        structure: [ { field: 'id', width: '80px', name: 'ID' }, { field: 'val', width: '80px', name: 'Value' }, ],
    }, document.createElement('div'));

    dojo.byId("gridDiv").appendChild(grid_report.domNode);

    dojo.connect(grid_report, 'onStyleRow', function (row) {
        var idx = row.index;
        //// Below is not correct as index is the row index on the grid, but the data store is in a different order after sorting order change via clicking cell header
        var _item = grid_report.getItem(idx);
        if (!_item) return;

        var val = parseInt( _item._csvStore._dataArray[ idx ][1] );
        if (val <= 20) row.customStyles += 'background-color:#88f;';
        else if (val > 40) row.customStyles += 'background-color:#f88;';
        else row.customStyles += 'background-color:#ff8;';
        dojox.grid.DataGrid.prototype.onStyleRow.apply(this, arguments);
    });
    grid_report.startup();    
}); // end ready
}); // end require
</script>
</head>
<body class="tundra">
    <div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#88f;">Value 0-20</div>
    <div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#ff8;">Value 21-40 </div>
    <div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#f88;">Value 41 or more</div>
    <div id="gridDiv" style="width:'800px';height:'600px';"></div>
</body>
</html>

Answer 1

我找到了一个解决方法。它并不理想，因为它可能不适用于所有情况。

更改行：

var idx = row.index;

为：

var idx = -1;

在上面的新编辑行之后，添加以下内容：

var _item = null;
grid_report.store.fetch({onComplete: function(items) {
    dojo.forEach(items, function(item, index) {
        // KLUDGE FOR finding item after sort
        // use merged csv data AND row.node.textContent
        var merged_csv_text = item._csvStore._dataArray[index].join('');
        if (merged_csv_text == row.node.textContent) {
            idx = index; // I finally get the correct index here!!!
            return;
        }
    });
} });
if (idx ==  -1) return;

仅当 merged_csv_text 形成的每个数据都是唯一的时，此方法才有效。

通过标题排序后，dojo datagrid OnStyleRow不正确

1 个答案: