当前位置: 首页 > 工具软件 > Fancytree > 使用案例 >

FancyTree 状态保持

翟默
2023-12-01

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: suppress activate event after active node was restored.

  • overrideSource, type: {boolean}, default: true
    true: persisted information will be used, even if source data is set to true or false.
    false: persisted information will only be used if source data is undefined.

  • 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的有效期,当然还有其他若干存储方式可选择

 

转载于:https://www.cnblogs.com/qidian10/p/5514411.html

 类似资料: