我正在根据列中的值设置网格行的样式。
在初始加载时它看起来不错,但是,当我单击标题进行排序时,样式遵循原始样式并且不反映排序列表中的值。
在进行样式覆盖的onStyleRow事件中,我可以获得网格的行对象,但是......如何从行中获取列数据以便我可以正确设置它的样式。
我已经解决了下面的两个问题以及 StackOverflow 中的其他几个问题,谷歌搜索,检查了 Dojo API 文档和参考等。到目前为止没有结果......
dojox DataGrid onStyleRow 第一次工作,然后不再工作
我在下面附上了工作代码,您可以剪切并粘贴到 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>