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

 

FancyTree 状态保持的更多相关文章

  1. Fancytree Javascript Tree的入门使用

    Fancytree Javascript Tree的入门使用 一.概念----是做什么的能干什么 Fancytree是一个Javascript控件,它依赖于: <script src=" ...

  2. Fancytree Javascript Tree TreeTable 树介绍和使用

    Fancytree是一个非常棒的Javascript控件,功能强大,文档健全.在做Javascript Tree控件选型时,主要基于以下几点选择了Fancytree 在Javascript Tree控 ...

  3. 【小程序分享篇 二 】web在线踢人小程序,维持用户只能在一个台电脑持登录状态

    最近离职了, 突然记起来还一个小功能没做, 想想也挺简单,留下代码和思路给同事做个参考. 换工作心里挺忐忑, 对未来也充满了憧憬与担忧.(虽然已是老人, 换了N次工作了,但每次心里都和忐忑). 写写代 ...

  4. Http状态码之:301、302重定向

    概念 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地 ...

  5. C# 利用性能计数器监控网络状态

    本例是利用C#中的性能计数器(PerformanceCounter)监控网络的状态.并能够直观的展现出来 涉及到的知识点: PerformanceCounter,表示 Windows NT 性能计数器 ...

  6. 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。如果服务器位于远程计算机上,请检查。。。

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Ser ...

  7. JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

    本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...

  8. 【.net 深呼吸】启动一个进程并实时获取状态信息

    地球人和火星人都知道,Process类既可以获取正在运行的进程,也可以启动一个新的进程.在79.77%应用场合,我们只需要让目标进程顺利启动就完事了,至于它执行了啥,有没有出错,啥时候退出就不管了. ...

  9. Android GridView 通过seletor 设置状态和默认状态

    Android中可以通过selector控制GridView Item 的状态,而省去使用代码控制 GridView View Selector Xml文件 <?xml version=&quo ...

随机推荐

  1. [转]oracle审计详解

    http://blog.chinaunix.net/u2/66903/showart_2082884.html Oracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用 ...

  2. linux tcp协议定时器

    1 连接建立定时器:75秒 2 保活定时器:2小时又10分钟 3 重传定时器:根据RTT计算 4 2MSL定时器:最大报文段存活时间 5 持续定时器

  3. DIV与SPAN的区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  4. jpa 注解使用说明

    1.@Entity(name="EntityName") 必须,name为可选,对应数据库中一的个表 2.@Table(name="",catalog=&quo ...

  5. 专题:点滴Javascript

    JS#38: Javascript中递归造成的堆栈溢出及解决方案 JS#37: 使用console.time测试Javascript性能 JS#36: Javascript中判断两个日期相等 JS#3 ...

  6. ASP.NET 5系列教程 (二):Hello World

    本篇文章内容比较基础,主要是向大家展示如何创建一个 ASP.NET 5 工程,主要包含内容如下: 创建ASP.NET 5 工程 添加 Todo 控制器 安装 K Version Manager 执行 ...

  7. 有关HTML5 Video对象的ontimeupdate事件的问题

    日前在做一个视频播放的页面,其中用到了HTML5的Video对象,这个是HTML5中新增的一个对象,支持多种不同格式的视频在线播放,功能比较强大,而且还扩展了许多事件,可以通过JavaScript脚本 ...

  8. 样式中的url加载探疑

    当一个项目多人维护,特别是接手别人的项目,而项目又在改之又改的基础上再改,我一直遵循,别人的样式我不动的原则,尽量不因为一时不察,导致整站或部分页面出现错位的现象,因些在修改样式与写样式时都是在原有的 ...

  9. [读书笔记]C#学习笔记八:StringBuilder与String详解及参数传递问题剖析

    前言 上次在公司开会时有同事分享windebug的知识, 拿的是string字符串Concat拼接 然后用while(true){}死循环的Demo来讲解.其中有提及string操作大量字符串效率低下 ...

  10. 使用轻量级ORM Dapper进行增删改查

      项目背景 前一段时间,开始做一个项目,在考虑数据访问层是考虑技术选型,考虑过原始的ADO.NET.微软的EF.NH等.再跟经理讨论后,经理强调不要用Ef,NH做ORM,后期的sql优化不好做,公司 ...