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

这种方式，持久性插件将始终使用相同的命名空间设置和获取饼干。