jqGrid：執行排序而不刷新整個網格

Question

我有一個應用程序輪詢數據庫並在運行時更新jqGrid。我正在使用數據類型：「本地」，以便有能力在客戶端操縱數據而無需重新加載所有內容。

我第一次嘗試更新數據本身，更新了網格的數據並重新加載了它。這工作，但在IE8（不幸的是我們的主要目標），當滾動條被重置到原來的位置時閃爍。還有一個問題是選擇被重置，但那個會被解決。

grid.setGridParam({ data: localData }); 
var scrollPosition = grid.closest(".ui-jqgrid-bdiv").scrollTop(); 
grid.trigger('reloadGrid'); 
grid.closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition); 

我的第二次嘗試根據操作自行更新各個行。

if (toUpdate) { /* Not auto sorted */ 
    grid.jqGrid('setRowData', entityUpdate.EntityId, entityUpdate); 
} 
else if(toAdd) { /* Not auto sorted */ 
    grid.jqGrid('addRowData', entityUpdate.EntityId, entityUpdate); 
} 
else if(toDelete) { 
    grid.jqGrid('delRowData', entityUpdate.EntityId); 
} 

This works great。選擇沒有重置，沒有閃爍，但是最後一個問題是：這些行沒有被使用。

更新的任何行都保留在原來的位置，並且添加的任何行都不在正確的位置。我可以使用「sortGrid」方法，但隨後我們又回來刷新整個網格。我可以使用addRowData方法的「position」和「srcrowid」參數的組合，以便將它放在正確的位置，但我必須知道確切位置。有沒有一種方法可以使用內置的排序算法來找到放置的位置？該代碼將變爲：

if (toUpdate) { 
    grid.jqGrid('delRowData', entityUpdate.EntityId); 
    grid.jqGrid('addRowData', entityUpdate.EntityId, entityUpdate, ?, ?); 
} 
else if(toAdd) { 
    grid.jqGrid('addRowData', entityUpdate.EntityId, entityUpdate, ?, ?); 
} 
else if(toDelete) { 
    grid.jqGrid('delRowData', entityUpdate.EntityId); 
} 

Answer 1

我已經通過應用我自己的排序解決了這個問題。我的列只有sorttype：'text'，因此這是有效的。作爲jqGrid的未來功能，如果addRowData的位置參數將採用「排序」，以便按排序順序指定它，那將會很不錯。請注意，EntityId是我的id列（隱藏列），並且當網格最初加載時，我的列選項指定排序名稱和排序順序。

function updateGrid(grid, entities) { 
    var sortName = grid.jqGrid('getGridParam', 'sortname'); 
    var sortOrder = grid.jqGrid('getGridParam', 'sortorder'); 
    var rowData = grid.jqGrid('getRowData'); 
    for (var i = 0; i < entities.length; i++) { 
     var entityUpdate = entities[i]; 
     if (shouldBeInGrid) { 
      var currentRow = grid.jqGrid('getRowData', entityUpdate.EntityId); 
      //The row exists, update it. 
      if (!isEmptyRow(currentRow)) { 
       if (currentRow[sortName] == entityUpdate[sortName]) { 
        //The column hasn't changed, just update the values. 
        grid.jqGrid('setRowData', entityUpdate.EntityId, entityUpdate); 
       } 
       else { 
        grid.jqGrid('delRowData', entityUpdate.EntityId); 
        addRowSorted(grid, rowData, sortName, sortOrder, entityUpdate); 
       } 
      } 
      //The row does not exist, add it. 
      else { 
       addRowSorted(grid, rowData, sortName, sortOrder, entityUpdate); 
      } 
     } 
     //The row should not be in the table, delete it if it doesn't exist. 
     else { 
      grid.jqGrid('delRowData', entityUpdate.EntityId); 
     } 
    } 
} 

function addRowSorted(grid, allData, sortName, sortOrder, toAdd) { 
    for (var i = 0; i < allData.length; i++) { 
     var valueFromGrid = allData[i][sortName].toLowerCase(); 
     var valueToVerify = toAdd[sortName].toLowerCase(); 
     var srcId = allData[i][entityIdColumnId]; 
     if (sortOrder == "desc" && valueFromGrid < valueToVerify) { 
      grid.jqGrid('addRowData', toAdd.EntityId, toAdd, 'before', srcId); 
      return; 
     } 
     else if (sortOrder == "asc" && valueFromGrid > valueToVerify) { 
      grid.jqGrid('addRowData', toAdd.EntityId, toAdd, 'before', srcId); 
      return; 
     } 
    } 
    //The data is empty or it should be last, add it at the end. 
    grid.jqGrid('addRowData', toAdd.EntityId, toAdd, 'last'); 

} 


function isEmptyRow(data) { 
    for (var property in data) { 
     return false; 
    } 
    return true; 
} 

Answer 2

我會建議你使用

grid.trigger('reloadGrid', [{current:true}]); 

保存選擇（見here）。取決於電網的其他選項，您無法真正需要保存並恢復scrollTop位置。我想滾動問題可能是閃爍的原因。

此外，驗證您使用gridview: true選項非常重要。此外，datatype: "local"的使用可能不是最好的解決方案。可能您需要將datatype: "json"與loadonce: true一起使用。如果需要，您可以從服務器更新數據。有關詳細信息，請參見here和here。

這是理解非常重要，如果你在頁面上改變一個元素（如網格單元）的Web瀏覽器必須重新計算的所有現有元素的位置。我建議你閱讀the article。 setRowData的當前實現使得該行的每個單元格的html內容將分開完成（參見here）。因此，如果網格中有n列，則網絡瀏覽器會使整個頁面的迴流大約爲n次。如果你addRowData整行將在一個操作（如here）。

重裝整個格（具有.setGridParam({ data: localData });和reloadGrid）的主要優點是，整個柵格體將被插入爲一個操作（參見here）。所以整個電網的更新只遵循一次迴流。因爲還有其他一些變化（比如更新尋呼機），但總的來說，整個頁面的更新速度要快得多，因爲它看起來像第一次看。使用gridview: true具有這種行爲非常重要。

更新：我建議您另外閱讀the answer。可能它對你也有幫助。