DataGrid样式修改

问题已解决： grid有一个函数 postrender，这个问题花了一天时间，教训是要多看API

 

项目需要，要修改DataGrid的样式(基于trunda, dojo版本 1.3.2)，基本的要求是要做到奇偶列的文字颜色是不一样的。我用一段JS实现了这个效果。思路是页面加载后取得grid的DOM，分析其单元格的idx属性即可判断出是哪一列，然后加上style.

问题是这样的：

 1 dojo.addOnLoad 在FF&IE中都不会执行这一段JS，换成 window.onload 后可在Firefox中有效，IE无效。

 2  多次刷新浏览器的时候script没有执行，style没有加上去。分析原因可能是刷新后grid还没有加载完就先执行了script.

 3 当点击列头排序或者调整某列宽度的时候，style也不见了。分析原因可能是执行这些操作的时候dojo重新渲染了一次grid而没有执行到我的JS。

有熟悉dojo的朋友可以帮忙解决这个问题吗?

 

之所以要用JS来修改样式是因为我发现gird的HTML代码里面所的有单元格都是.dojoxGridCell的样式，没有办法来区分奇偶列加不同的样式。不知道有没有更好的方法可以解决这一问题。

 

原始Grid:

加上style的Grid 

 

 

    function styleGrid()
    {
        try{
            if (dojo.query(".dojoxGridHeader th").length < 1){
                throw new Error("grid not loaded completely");
            }
            // grid data
            dojo.forEach(dojo.query(".dojoxGridCell"), function(item){
                var idx = parseInt( dojo.attr(item, "idx") );
                if(idx % 2 == 1){
                    dojo.style(item, "color", "#305ab8");
                }else{
                    dojo.style(item, "color", "#7b7b7b");
                }
            });

            // grid header
            dojo.forEach(dojo.query(".dojoxGridHeader th"), function(item){
                var idx = parseInt( dojo.attr(item, "idx") );
                if(idx % 2 == 1){
                    dojo.style(item, "background", "#dddddd");
                }else{
                    dojo.style(item, "background", "#ededed");
                }
            });
        }
        catch(e)
        {
        	setTimeOut("styleGrid()",500);
        }
    }

    window.onload=function(){
        styleGrid();
    };

 

 

grid.views.views是所有view的数组,每个view有onAfterRow事件:
onAfterRow: function(inRowIndex, cells, inRowNode)

,connect事件上去就可以获得所有cell的引用,为cell.index为奇数的cell加一个css class从而实现要的功能.

例如:
var grid = new dojox.grid.DataGrid(...);
dojo.forEach(grid.views, function(view){
dojo.connect(view, 'onAfterRow', function(idx, cells, inRowNode){
for(var i = 0;i <cells.length; i++){
  if(!i%2)dojo.addClass(inRowNode.firstChild.rows[idx].cells[i], 'columnOdd');
}
}
});

也可以覆盖grid的onStyleRow方法