FancyTree非常优秀的树控件
examples:http://wwwendt.de/tech/fancytree/
如何将树节点的选中状态保存下来,无论刷新页面还是,ajax重复请求,都保持在上一次状态呢?
FancyTree提供状态持久化保存扩展,方案如下:
https://github.com/mar10/fancytree/wiki/ExtPersist
$("#tree").fancytree({ extensions: ["persist"], checkbox: true, persist: { // Available options with their default: cookieDelimiter: "~", // character used to join key strings cookiePrefix: undefined, // 'fancytree-<treeId>-' by default cookie: { // settings passed to jquery.cookie plugin raw: false, expires: "", path: "", domain: "", secure: false }, expandLazy: false, // true: recursively expand and load lazy nodes overrideSource: true, // true: cookie takes precedence over `source` data attributes. store: "auto", // 'cookie': use cookie, 'local': use localStore, 'session': use sessionStore types: "active expanded focus selected" // which status types to store }, [...] });
Options
-
cookieDelimiter, type: {string}, default: '~'
Character used to join key strings. -
cookiePrefix, type: {string}, default: 'fancytree-<treeId>-'
Used to generate storage keys. -
cookie, type: {object}, default: use a session cookie
Options passed to$.cookie
plugin (only if cookies are used; see also 'store' option). -
expandLazy, type: {boolean}, default: false
true: recursively expand and load lazy nodes. -
fireActivate, type: {boolean}, default: true
false: suppressactivate
event after active node was restored. -
overrideSource, type: {boolean}, default: true
true: persisted information will be used, even if source data is set totrue
orfalse
.
false: persisted information will only be used if source data isundefined
. -
store, type: {string}, default: 'auto'
Storage type 'local': localStorage, 'session': sessionStorage, 'cookie': use js-cookie (or jquery-cookie ) plugin.
'auto': use sessionStorage if available, fallback to cookie.
Use 'local' (or 'cookie' with expiration settings) to store status over sessions. -
types, type: {string}, default: 'active expanded focus selected'
Which status types to store, separated by space.
Events
- restore
Fired after tree status is restored.
Methods
-
{void} tree.clearCookies(types)
Reset persistence data.
{string} [types='active expanded focus selected']
这里注意:cookiePrefix,如果不设置该值的话,每次ajax请求的tree都是不一样(非刷新页面),无法达到保持状态的效果,设置该值后,无论刷新页面还是ajax请求,都可以保持状态了。
参考文献:http://stackoverflow.com/questions/33147617/fancytree-only-loads-persist-state-after-page-refresh
cookie: { expires:365 }, 可以设置cookie的有效期,当然还有其他若干存储方式可选择