FancyTree - 只加載頁面刷新後的持久狀態

Question

因此，我有一個工作正常的FancyTree。當用戶移動到另一個頁面時，我想保持樹的狀態。我正在關注這個鏈接來實現這一點; http://wwwendt.de/tech/fancytree/demo/sample-ext-persist.html#

我正在使用Ajax加載我的所有頁面，當我使用Ctrl + F5重新加載網站並導航到帶有樹的頁面時，以前狀態從本地存儲加載。這很好。

當我刷新整個頁面：

但是當我去到另一個網頁使用Ajax和回來與樹的頁面時，它不會加載以前的狀態。

當我加載使用Ajax的視圖：

這是我的代碼：

var glyph_opts = { 
     map: { 
      doc: "fa fa-truck", 
      docOpen: "fa fa-truck", 
      checkbox: "glyphicon glyphicon-unchecked", 
      checkboxSelected: "glyphicon glyphicon-check", 
      checkboxUnknown: "glyphicon glyphicon-share", 
      dragHelper: "glyphicon glyphicon-play", 
      dropMarker: "glyphicon glyphicon-arrow-right", 
      error: "glyphicon glyphicon-warning-sign", 
      expanderClosed: "glyphicon glyphicon-plus-sign", 
      expanderLazy: "glyphicon glyphicon-plus-sign", 
      expanderOpen: "glyphicon glyphicon-minus-sign", 
      folder: "glyphicon glyphicon-folder-close", 
      folderOpen: "glyphicon glyphicon-folder-open", 
      loading: "glyphicon glyphicon-refresh" 
     } 
    }; 

    $("#tree").fancytree({ 
     extensions: ["glyph", "filter", "persist"], 
     persist: { 
      expandLazy: true, 
      // fireActivate: true, // false: suppress `activate` event after active node was restored 
      overrideSource: true, // true: cookie takes precedence over `source` data attributes. 
      store: "auto" // 'cookie', 'local': use localStore, 'session': sessionStore 
     }, 
     source: $.ajax({ 
      url: '@Url.Action("CompaniesTree", "Dashboard")', 
      type: "GET", 
      dataType: "json" 
     }), 
     activate: function (event, data) { 

      if (data.node.data.GroupType === 4) { 
       var model = { 
        key: data.node.key, 
        data: data.node.data 
       }; 

      } 
      return true; 
     }, 
     iconClass: function (event, data) { 
      if (data.node.data.GroupType === 1) { 
       return "fa fa-desktop"; 
      } 
      if (data.node.data.GroupType === 2) { 
       return "fa fa-sitemap"; 
      } 
     }, 
     selectMode: 2, 
     init: function (event, data) { 
      data.tree.debug(event.type, data); 
     }, 
     restore: function (event, data) { 
      data.tree.debug(event.type, data); 
     }, 
     loadChildren: function (event, data) { 
      data.node.debug(event.type, data); 
     }, 

     quicksearch: true, 
     filter: { 
      //http://wwwendt.de/tech/fancytree/demo/sample-ext-filter.html# 
      //autoApply: true, // Re-apply last filter if lazy data is loaded 
      counter: false, // Show a badge with number of matching child nodes near parent icons 
      fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar' 
      hideExpandedCounter: true, // Hide counter badge, when parent is expanded 
      mode: "hide" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead) 
     }, 
     glyph: glyph_opts, 
     lazyLoad: function (event, data) { 

      var model = { 
       key: data.node.key, 
       data: data.node.data 
      }; 
      $.ajax({ 
       url: '@Url.Action("ChildItems", "Dashboard")', 
       type: "POST", 
       async: false, 
       contentType: "application/json", 
       data: JSON.stringify(model), 
       success: function (response) { 
        data.result = response; 
       } 
      }); 
     } 

    }); 

    var tree = $("#tree").data("ui-fancytree").getTree(); 

我甚至檢查會話存儲並查看花式樹狀態的數據被保存 - 沒有錯誤Console

Answer 1

簡答題：使用cookiePrefix配置選項。

說明：

這是因爲每次加載該頁面時，你正在創建一個新的FancyTree實例。 Fancytree插件會跟蹤它創建的所有實例，爲每個新實例分配一個唯一的ID和一個名稱空間。從fancytree源代碼：

function Fancytree(widget) { 
    // some other code ... 
    this._id = $.ui.fancytree._nextId++; 
    this._ns = ".fancytree-" + this._id; // append for namespaced events 
    // some other code ... 
} 

缺省情況下，持久性插件使用的名稱空間是fancytree-[instance-ID]-。所以，對於每個新的實例，它都會設置它自己的cookie。幸運的是，你還可以手動設置命名空間的配置選項cookiePrefix使用方法：

$("#tree").fancytree({ 
    extensions: ["glyph", "filter", "persist"], 
    persist: { 
     cookiePrefix: 'fancytree-1-', 
     expandLazy: true, 
     overrideSource: true, // true: cookie takes precedence over `source` data attributes. 
     store: "auto" // 'cookie', 'local': use localStore, 'session': sessionStore 
    }, 
    // rest of the config ... 
}); 

這種方式，持久性插件將始終使用相同的命名空間設置和獲取餅乾。