在cookie中發送展開的TreeGrid節點

Question

繼續使用this topic我想將擴展節點保存在cookie中。這是最好的方法嗎？

我不確定在的方式JSON數據檢查。

爲什麼expandRow不起作用？

var gridId = "#table"; 
var grid = $(gridId); 
grid.jqGrid({ 

... 

loadComplete: function() { 
var ids = grid.jqGrid('getDataIDs'); 

var cookie = $.cookie(gridId + '_expanded'); 
var expanded = false; 

if (typeof(cookie) == 'string') 
var expanded = JSON.parse(cookie); 

for (var i=0;i<ids.length;i++) { 
var id=ids[i]; 
var row_data = $(this).jqGrid('getRowData', id); 

if (expanded && id in expanded && expanded[id] == 'true') 
$(gridId + ' tr#' + id + ' div.treeclick').trigger("click"); 
//Why it doesn't work? 
//grid.jqGrid('expandRow', row_data); 

} 
} 

... 

}); 

function setCookie() { 
      var ids = grid.jqGrid('getDataIDs'); 

      var expanded = Object(); 
      var string = ''; 

      for (var i=0;i<ids.length;i++) {  
       var id=ids[i]; 
       var rowData = grid.jqGrid('getRowData', id);     

       if (rowData.parent != '' && grid.jqGrid('isVisibleNode', rowData) === true) 
        expanded[rowData.parent] = true 
      } 

      for (e in expanded) 
       string += '"' + e + '":' + '"' + expanded[e] + '",'; 

      $.cookie(gridId + '_expanded', '{'+ string.substring(0, string.length - 1) + '}', { expires: 365 });  
} 

var orgExpandNode = $.fn.jqGrid.expandNode, orgCollapseNode = $.fn.jqGrid.collapseNode; 

     $.jgrid.extend({ 
      expandNode : function(rc) { 
       orgExpandNode.call(this, rc); 
       setCookie();    
      }, 
      collapseNode : function(rc) { 
       orgCollapseNode.call(this, rc); 
       setCookie();       
      }, 
}); 

P.S.我總是得到這個愚蠢的警報:)

您的文章沒有太多的上下文來解釋代碼段;請更清楚地解釋你的情況。

Answer 1

我建議您使用localStorage代替cookies。我在the answer中描述了原因。我根據the answer和another one的演示製作了the demo。對於the demo我使用了我最近的一個answer的測試數據。

嘗試擴大the demo一些樹節點並重新加載網格與F5。您將看到所有展開的行在重新加載後都保持展開狀態。

，你會發現下面的演示代碼：

var $grid = $('#treegridCompanies'), 
    saveObjectInLocalStorage = function (storageItemName, object) { 
     if (typeof window.localStorage !== 'undefined') { 
      window.localStorage.setItem(storageItemName, JSON.stringify(object)); 
     } 
    }, 
    removeObjectFromLocalStorage = function (storageItemName) { 
     if (typeof window.localStorage !== 'undefined') { 
      window.localStorage.removeItem(storageItemName); 
     } 
    }, 
    getObjectFromLocalStorage = function (storageItemName) { 
     if (typeof window.localStorage !== 'undefined') { 
      return JSON.parse(window.localStorage.getItem(storageItemName)); 
     } 
    }, 
    myColumnStateName = function (grid) { 
     return window.location.pathname + '#' + grid[0].id; 
    }, 
    idsOfExpandedRows = [], 
    updateIdsOfExpandedRows = function (id, isExpanded) { 
     var index = $.inArray(id, idsOfExpandedRows); 
     if (!isExpanded && index >= 0) { 
      idsOfExpandedRows.splice(index, 1); // remove id from the list 
     } else if (index < 0) { 
      idsOfExpandedRows.push(id); 
     } 
     saveObjectInLocalStorage(myColumnStateName($grid), idsOfExpandedRows); 
    }, 
    orgExpandRow = $.fn.jqGrid.expandRow, 
    orgCollapseRow = $.fn.jqGrid.collapseRow; 

idsOfExpandedRows = getObjectFromLocalStorage(myColumnStateName($grid)) || []; 

$grid.jqGrid({ 
    url: 'SPATEN-TreeGrid2.json', 
    datatype: 'json', 
    ajaxGridOptions: { contentType: "application/json" }, 
    jsonReader: { 
     id: "CompanyId", 
     cell: "", 
     root: function (obj) { return obj.rows; }, 
     page: function() { return 1; }, 
     total: function() { return 1; }, 
     records: function (obj) { return obj.rows.length; }, 
     repeatitems: true 
    }, 
    beforeProcessing: function (data) { 
     var rows = data.rows, i, l = rows.length, row, index; 
     for (i = 0; i < l; i++) { 
      row = rows[i]; 
      index = $.inArray(row[0], idsOfExpandedRows); 
      row[5] = index >= 0; // set expanded column 
      row[6] = true;  // set loaded column 
     } 
    }, 
    colNames: ['CompanyId', 'Company'], 
    colModel: [ 
     { name: 'CompanyId', index: 'CompanyId', width: 1, hidden: true, key: true }, 
     { name: 'Company', index: 'Company', width: 500 } 
    ], 
    height: 'auto', 
    pager: '#pager', 
    rowNum: 10000, 
    sortable: false, 
    treeGrid: true, 
    treeGridModel: 'adjacency', 
    ExpandColumn: 'Company' 
}); 
$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: false}); 
$grid.jqGrid('navButtonAdd', '#pager', { 
    caption: "", 
    buttonicon: "ui-icon-closethick", 
    title: "Clear saved grid's settings", 
    onClickButton: function() { 
     removeObjectFromLocalStorage(myColumnStateName($(this))); 
     window.location.reload(); 
    } 
}); 
$.jgrid.extend({ 
    expandRow: function (rc) { 
     //alert('before expandNode: rowid="' + rc._id_ + '", name="' + rc.name + '"'); 
     updateIdsOfExpandedRows(rc._id_, true); 
     return orgExpandRow.call(this, rc); 
    }, 
    collapseRow: function (rc) { 
     //alert('before collapseNode: rowid="' + rc._id_ + '", name="' + rc.name + '"'); 
     updateIdsOfExpandedRows(rc._id_, false); 
     return orgCollapseRow.call(this, rc); 
    } 
});