dojo datagrid OnStyleRow在通過標題排序後不正確

我正在根據列中的值設計網格行。dojo datagrid OnStyleRow在通過標題排序後不正確

在初始加載時它看起來很好，但是，當我單擊要排序的標題時，樣式遵循原始樣式，並不反映排序列表中的值。

在onStyleRow事件，做造型控，我可以得到電網，的行對象但是...我怎麼從該行獲得的列數據，這樣我可以正確樣式。

我已經通過下面的兩個問題和其他一些在StackOverflow上，一派走了，檢查道場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>

來源

2013-10-24 Aaron Gong

有什麼想法？任何人？我討厭挖掘源代碼來編寫解決方法... –

我找到了解決辦法。這並不理想，因爲它可能不適用於所有情況。

變化符合：

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-01 10:52:11

dojo datagrid OnStyleRow在通過標題排序後不正確

回答

相關問題