0

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

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

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

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

dojox DataGrid onStyleRow 第一次工作，然后不再工作

dojo datagrid 自定义排序服务器端

我在下面附上了工作代码，您可以剪切并粘贴到 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>
4

1 回答 1

0

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

换行：

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形成的每个数据都是唯一的时才有效。

于 2013-11-01T10:52:11.010 回答