jquery - FancyTree - 仅在页面刷新后加载持久状态

Question

所以我有一个工作正常的 FancyTree。当用户移动到另一个页面时，我想保持树的状态。我正在点击此链接来实现这一目标； http://wwwendt.de/tech/fancytree/demo/sample-ext-persist.html#

我正在使用 Ajax 加载所有页面，当我使用 Ctrl + F5 重新加载网站并导航到带有树的页面时，将从本地存储加载上一个状态。这很好。

当我刷新整个页面时:

但是当我使用ajax转到另一个页面并返回到带有树的页面时，它不会加载上一个状态。

当我使用 Ajax 加载 View 时:

这是我的代码:

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

我什至检查了 session 存储，发现 Fancy Tree 状态的数据已保存 - 控制台中没有错误

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

这样，持久性插件将始终使用相同的命名空间来设置和获取 cookie。