onStyleRow事件不会保留在做排序，过滤或分页

Question

我已经使用dojo 1.10增强的网格。在这里，我正在使用onStyleRow事件，我将设计这一行。它在第一次加载时工作得很好，但是当我尝试执行分页，排序和过滤时，它不知道记住行并在旧行索引上应用新样式。例如，如果我在加载时突出显示了和行。现在，当我对数据进行排序时，数据会发生变化，但在这里它会将新样式再次应用到2行和4行，而不管行是否已更改。这是现有代码中的错误吗？

我做这样的 -

dojo.connect(mygrid, 'onStyleRow', this, function(row) { 
    if (fixedDataItems[row.index] == '1' && hideFixesVisibility == 'Editable') //some condition 
     row.customStyles += 'background-color: blue !important;'; 
    else 
     row.customStyles += 'color: black !important;'; 
    }); 

我没有找到文档相关的任何事情。有没有人有这方面的知识？

Answer 1

试试这个

http://jsfiddle.net/bnqkodup/374/

HTML

<div id="container" class="claro"> 
    <div id="gridDiv"></div> 
</div> 

JS

dojo.require("dojox.grid.EnhancedGrid"); 
dojo.require("dojo.data.ItemFileWriteStore"); 
dojo.require("dojo.on"); 

dojo.ready(function (on) { 
    /*set up data store*/ 
    var data = { 
     identifier: 'id', 
     items: [] 
    }; 
    var data_list = [{ 
     col1: "normal", 
     col2: false, 
     col3: 'But are not followed by two hexadecimal', 
     col4: 29.91 
    }, { 
     col1: "important", 
     col2: false, 
     col3: 'Because a % sign always indicates', 
     col4: 9.33 
    }, { 
     col1: "important", 
     col2: false, 
     col3: 'Signs can be selectively', 
     col4: 19.34 
    }]; 
    var rows = 60; 
    for (var i = 0, l = data_list.length; i < rows; i++) { 
     data.items.push(dojo.mixin({ 
      id: i + 1 
     }, data_list[i % l])); 
    } 
    var store = new dojo.data.ItemFileWriteStore({ 
     data: data 
    }); 
function formatLink(value){ 
     return '<a href="#">'+value+'</a>'; 
    } 
    /*set up layout*/ 
    var layout = [ 
     [{ 
      'name': 'Column 1', 
      'field': 'id', 
      formatter: formatLink 

     }, { 
      'name': 'Column 2', 
      'field': 'col2' 
     }, { 
      'name': 'Column 3', 
      'field': 'col3', 
      'width': '230px' 
     }, { 
      'name': 'Column 4', 
      'field': 'col4', 
      'width': '230px' 
     }] 
    ]; 

    /*create a new grid:*/ 
    var grid = new dojox.grid.EnhancedGrid({ 
     id: 'grid', 
     store: store, 
     structure: layout, 
     rowSelector: '20px' 
    }, 
    document.createElement('div')); 

    /*append the new grid to the div*/ 
    dojo.byId("gridDiv").appendChild(grid.domNode); 

    /*Call startup() to render the grid*/ 
    grid.startup(); 

    //dojo.on(grid,"CellClick",function(evt){ 

    /* <=search for the column here */ 
    //var idx = evt.cellIndex; 
    //var cellNode = evt.cellNode; 
    //if(cellNode){ 
     //cellNode.style.backgroundColor = "green"; 
    // } 
    //if(evt.cellIndex==1){ 
    //this.set('style','background-color:red;'); 
    // } 
    // }); 
    dojo.connect(grid, 'onStyleRow', this, function(row) { 
    var item = grid.getItem(row.index); 
     if(item){ 
     //console.log(store); 
      var type = store.getValue(item,'col1',null); 

      if(type == "normal"){ 
       row.customStyles += "color:red;"; 
       //row.customClasses += " dismissed"; 
      } 
     } 
    }); 
}); 

CSS

@import"../lib/dojo/resources/dojo.css"; 
@import"../lib/dijit/themes/claro/claro.css"; 
@import"../lib/dojox/grid/enhanced/resources/claro/EnhancedGrid.css"; 
@import"../lib/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"; 

/*Grid need a explicit width/height by default*/ 
#grid { 
    width: 1110px; 
    height: 494px; 
    color: #000000; 
}