FancyTree - 仅在页面刷新后加载 Persist 状态
FancyTree - Only loads Persist state after page refresh
所以我有一个工作正常的 FancyTree。当用户移动到另一个页面时,我想保持树的状态。我正在关注这个 link 来实现这个目标; http://wwwendt.de/tech/fancytree/demo/sample-ext-persist.html#
我正在使用 Ajax 加载我的所有页面,当我使用 Ctrl + F5
重新加载网站并导航到带有树的页面时,以前的状态是从本地存储加载的。哪个好。
当我刷新整个页面时:
但是当我使用 ajax 转到另一个页面并返回到带有 Tree 的页面时,它不会加载上一个状态。
当我使用 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();
我什至检查了会话存储,发现 Fancy Tree 状态的数据已保存 - Console
中没有错误
简答:使用 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。当用户移动到另一个页面时,我想保持树的状态。我正在关注这个 link 来实现这个目标; http://wwwendt.de/tech/fancytree/demo/sample-ext-persist.html#
我正在使用 Ajax 加载我的所有页面,当我使用 Ctrl + F5
重新加载网站并导航到带有树的页面时,以前的状态是从本地存储加载的。哪个好。
当我刷新整个页面时:
但是当我使用 ajax 转到另一个页面并返回到带有 Tree 的页面时,它不会加载上一个状态。
当我使用 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();
我什至检查了会话存储,发现 Fancy Tree 状态的数据已保存 - Console
简答:使用 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。