localStorage में jqGrid के राज्य को बचाने साइट

Question

छोड़ने के बाद मैं एक jqGrid के राज्य (sortingcolumn, sortingorder, कॉलम, उपकरण पट्टी searchfields की चौड़ाई), जब उपयोगकर्ता साइट छोड़ और ग्रिड बहाल जब वह वापस करने के लिए आता सहेजना चाहते जगह।

मेरा पहला प्रयास getGridParam विधि के साथ डेटा लोड करना था, फिर इसे JSON के साथ क्रमबद्ध करें और इसे कुकी में JSON-String के रूप में सहेजें। लेकिन एक कुकी में ग्रिडपाराम को बचाने के लिए पर्याप्त जगह नहीं है। इसलिए मैंने ग्रिड की स्थिति को बचाने के लिए स्थानीय स्टोरेज का उपयोग करने का फैसला किया। मेरा कोड इस तरह दिखता है:

$(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); 
}); 

यह ठीक काम करता है। लेकिन अगले चरण में मैं स्थानीय स्तर से ग्रिडपाराम लोड करता हूं और ग्रिड को पुनर्स्थापित करने का प्रयास करता हूं। डेटा लोड करना भी कोई समस्या नहीं है। डिबगिंग मोड में मैं देख सकता हूं कि सभी डेटा स्थानीय स्टोरेज से सही ढंग से लोड किए गए हैं। लेकिन अगर मैं setGridParam विधि के साथ ग्रिड को पुनर्स्थापित करना चाहता हूं तो ग्रिड में सभी डिफ़ॉल्ट मान हैं। मेरे कोड ऐसा दिखाई देता है:

$(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

यह कैसे मैं अपने ग्रिड की स्थिति को बचाया (हालांकि LocalStorage के बजाय एक छिपी हुई फ़ील्ड में json डेटा, लेकिन विचार के रूप में ही होना चाहिए) है।

छिपा क्षेत्र में JSON के रूप में ग्रिड पैरामीटर सहेजा जा रहा है:

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)); 
     } 

सहेजे गए डेटा लोड हो रहा है: (मैं ग्रिड के beforeRequest घटना में सहेजे गए डेटा लोड):

   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');       
        }            
       },