Fancytree Very good tree control
examples:http://wwwendt.de/tech/fancytree/
How to save the selected state of a tree node, whether the page is refreshed or the Ajax duplicate request is kept in the last state?
Fancytree provides a state persistence save extension with the following scenario:
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 stringsCookieprefix:undefined,//' fancytree-<treeid>-' by defaultCookie: {//settings passed to Jquery.cookie pluginRawfalse, Expires:"", Path:"", Domain:"", Secure:false}, Expandlazy:false,//true:recursively expand and load lazy nodesOverridesource:true,//True:cookie takes precedence over ' source ' data attributes.Store: "Auto",//' cookies ': Use cookies, ' local ': Use Localstore, ' session ': Use SessionstoreTypes: "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 the cookie is 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 is restored.
Overridesource, type: {Boolean}, Default:true
true: persisted information would be used, even if source data are set to true or false .
false: persisted information would 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 ' cookies ' with expiration settings) to the 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 ']
Note here:Cookieprefix, if you do not set this value, each time the AJAX request tree is not the same (not refresh the page), can not achieve the effect of holding state, after setting this value, regardless of the Refresh page or Ajax request, will be able to maintain the state.
Reference: Http://stackoverflow.com/questions/33147617/fancytree-only-loads-persist-state-after-page-refresh
Cookie: {expires:365}, you can set the expiration date of the cookie, and of course there are several other storage options available
Fancytree State hold