從動態數據更改Dojo Datagrid中的行背景

此主板上已經討論了更改Dojo DataGrid行背景的主題以及Dojo文檔，該文檔提供了一個完整示例（http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html）。從動態數據更改Dojo Datagrid中的行背景

我的問題有點不同。我需要根據一個公共字段更改行的背景顏色 - 我們稱之爲'CityId'。如果兩行具有相同的CityId，那麼它們應該具有相同的背景。請注意，此問題與網格中數據的分組或排序無關，但僅與共享公用ID字段的相鄰行的行樣式更改有關。

這個問題的兩個主要途徑涉及掛鉤'onStyleRow'事件或私人'_onFetchComplete'事件。

這裏是我的onStyleRow嘗試：

var idx = 0; 
var prevId = 0; 
function myStyleRow(row) { 
    var item = grid.getItem(row.index); 
    if(item) { 
     var currId = store.getValue(item, "CityId", null); 
     if (!!currId) { 

      if (prevId != currId) { 
       prevId = currId; 
       idx++; 
      } 

      if (idx%2 == 0) { 
       row.customStyles += 'background-color:#FFF000;'; 
      } else { 
       //row.customStyles += 'background-color:#000;'; 
      } 
     } 
    } 
    grid.focus.styleRow(row); 
    grid.edit.styleRow(row); 
}

因爲onStyleRow事件獲取鼠標懸停觸發它獲取其他參數

grid = new dojox.grid.DataGrid({onStyleRow:myStyleRow});

之所以出現這種方法是不穩定的中網格創建過程中調用，由於prevId值，導致行重新着色。我想知道是否/如何從觸發鼠標懸停時禁用onStyleRow。這將解決我的問題。

在_onFetchComplete方法中，我試圖找到一種方法來訪問網格行。這裏是我的代碼：

var idx = 0; 
var prevId = 0; 
grid.connect(grid, '_onFetchComplete', function() { 
    // wait until everything is loaded 
    for (var i in grid._pending_requests) { 
     if (grid._pending_requests[i]) { 
      return; 
     } 
    } 


    // parse through row data 
    for (var j=0; j < grid.rowCount; j++) { 
     var item = grid.getItem(j); 
     if(item) { 
      var currId = store.getValue(item, "CityId", null); 
      if (!!currId) { 

       if (prevId != currId) { 
        prevId = currId; 
        idx++; 
       } 

       if (idx%2 == 0) { 
        row.customStyles += 'background-color:#FFF000;'; 
       } else { 
        //row.customStyles += 'background-color:#000;'; 
       } 
      } 
     } 
    } 
});

這顯然是一項正在進行的工作，因爲有兩名失蹤的要點：通過網格的行（grid.rowCount不能正常工作），並以迭代的方式來獲取網格行的方式以便應用自定義樣式。我找不到像grid.getRow（）這樣的問題來解決這個問題。

任何指針表示讚賞。

來源

2014-03-13 Johnny D

我不確定你使用了哪個版本的dojo？可能它會解決問題，調用grid.on（'StyleRow'，myStyleRow）; Vers.1.9/dojo.connect（'grid'，'onStyleRow'，myStyleRow）;事件定義後，同時斷開整個Grid的onMouseover。此致 – MiBrock

我已經採取這個方法 - 但具有類似的（不穩定）的結果： dojo.connect（網格， 'onStyleRow'，由此，功能（行）{ \t變種項= grid.getItem（row.index）; \t ... }）; –

我會如何從網格上斷開onMouseover？ –

下面是最終代碼：

var idx = 0; 
var prevId = 0; 
var passing = {}; 
var color = {}; 
dojo.connect(grid, 'onStyleRow', this, function (row) { 
    var item = grid.getItem(row.index); 
    if(item) { 
     var currId = store.getValue(item, "CityId", null); 
     if (!passing[currId]) { 
      passing[currId] = true; 

      if (prevId != currId) {      
       prevId = currId; 
       idx++; 
      } 

      if (idx%2 == 0) { 
       row.customStyles += 'background-color:#FFF000;'; 
       color[currId] = 'background-color:#FFF000;'; 
      } else { 
       row.customStyles += 'background-color:#F2F7F7;'; 
       color[currId] = 'background-color:#F2F7F7;'; 
      } 
     } else { 
      row.customStyles += color[currId]; 
     } 
    } 
});

的「過客」對象被用於標記通過行的第一階段 - 這一點，因爲「prevId」值正確更新是非常重要的。該代碼適用於多個調用以獲取更多數據到網格中，因爲'prevId'保持其完整性。「顏色」對象保存爲行背景記錄的值。這是因爲onStyleRow事件在mouseover上被調用，這意味着每次都需要重新繪製。我希望這可以幫助別人。

來源

2014-03-18 20:45:10

從動態數據更改Dojo Datagrid中的行背景

回答

相關問題