Question

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

我使用Ajax加载所有页面，当我使用Ctrl + F5重新加载网站时，导航到带有树的页面，从本地存储加载以前的状态。哪个没问题。

当我刷新整个页面时：

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

当我使用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();

我甚至检查了会话存储，看到保存了花式树状态的数据 - 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 ...
});

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

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

1 个答案: