Zapisz stan jqGrid w localStorage po opuszczeniu strony.

Question

Chcę zapisać stan jqGrid (sortingcolumn, sortingorder, width of columns, pola wyszukiwania pasków narzędziowych), kiedy użytkownik opuści witrynę i przywróci siatkę po powrocie do Strona.

Moja pierwsza próba polegała na załadowaniu danych za pomocą metody getGridParam, a następnie serializacji za pomocą JSON i zapisaniu jej jako JSON-String w pliku cookie. Ale plik cookie nie ma wystarczająco dużo miejsca, aby zapisać siatkę. Postanowiłem więc użyć localstorage, aby zapisać stan siatki. Mój kod wygląda następująco:

$(window).unload(function() { 
    // Load GridParam 
    var gridData = $('#Grid').jqGrid('getGridParam')}; 
    // Serialize it to as JSON-String 
    var gridDataAsString = $.toJSON(gridData); 
    // Save the serialized Griddata in the localStorage 
    localStorage.setItem("GridParam", gridDataAsString); 
}); 

To działa dobrze. Ale w następnym kroku ładuję GridParam z localStroage i próbuję przywrócić siatkę. Łamanie danych również nie stanowi problemu. W trybie debugowania widzę, że wszystkie dane są poprawnie ładowane z localStorage. Ale jeśli chcę przywrócić Grid metodą setGridParam, siatka ma wszystkie domyślne wartości. Mój kod wygląda następująco:

$(document).ready(function() { 
    $("#Grid").jqGrid({ /* Initialize the grid with default values */ }); 

    var loadedGridDataAsString = localStorage.getItem("GridParam"); 
    // Use the default value if no data exists in localStorage 
    if (loadedGridDataAsString != null) { 
     // Deserialize the JSON-String to an object 
     var loadedGridData = $.evalJSON(loadedGridDataAsString); 
     $("#Grid").jqGrid('setGridParam', loadedGridData); 
     $("#Grid").trigger('reloadGrid'); 
    } 
} 

Answer 1

ten sposób uratowałem stan mojego siatki (dane json w ukrytym polu chociaż zamiast localStorage, ale idea powinna być taka sama).

Zapisywanie parametrów sieci jak JSON w ukrytym polu:

function saveGridParameters(grid) {  
      var gridInfo = new Object(); 

      gridInfo.url = grid.jqGrid('getGridParam', 'url'); 
      gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname'); 
      gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder'); 
      gridInfo.selrow = grid.jqGrid('getGridParam', 'selrow'); 
      gridInfo.page = grid.jqGrid('getGridParam', 'page'); 
      gridInfo.rowNum = grid.jqGrid('getGridParam', 'rowNum'); 
      gridInfo.postData = grid.jqGrid('getGridParam', 'postData'); 
      gridInfo.search = grid.jqGrid('getGridParam', 'search'); 

      $('#gridParams').val(JSON.stringify(gridInfo)); 
     } 

Ładowanie zapisane dane: (I załadować zapisane dane w przypadku beforeRequest siatki):

   beforeRequest: function() //loads the jqgrids state from before save 
       { 
        if(gridParams !=null && gridParams!="") 
        {        
         var gridInfo = $.parseJSON(gridParams);          
         var grid = $('#ReportPartsGrid');       

         grid.jqGrid('setGridParam', { url: gridInfo.url }); 
         grid.jqGrid('setGridParam', { sortname: gridInfo.sortname }); 
         grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder }); 
         grid.jqGrid('setGridParam', { selrow: gridInfo.selrow }); 
         grid.jqGrid('setGridParam', { page: gridInfo.page }); 
         grid.jqGrid('setGridParam', { rowNum: gridInfo.rowNum }); 
         grid.jqGrid('setGridParam', { postData: gridInfo.postData }); 
         grid.jqGrid('setGridParam', { search: gridInfo.search }); 

         gridParams = ''; 
         $('#ReportPartsGrid').trigger('reloadGrid');       
        }            
       },