ecomp-portal-FE/client/bower_components/jqTree/_examples/04_save_state.html

   1 ---
   2 title: Save the state in javascript tree
   3 layout: page
   4 js: examples/save_state.js
   5 css: example.css
   6 ---
   7
   8 <p id="nav">
   9     <a href="../03_drag_and_drop/">&laquo; Example 3</a>
  10     <a href="../05_load_on_demand/" class="next">Example 5 &raquo;</a>
  11 </p>
  12
  13 <h1>Example 4 - Save the state</h1>
  14
  15 <div id="tree1" data-url="/example_data/"></div>
  16
  17 <p>
  18    If you set the option <strong>saveState</strong> to true, then jqtree remembers the tree state after a page reload.
  19 </p>
  20 <ul>
  21     <li>
  22         JqTree save the state into localStorage.
  23         If the browser does not support localStorage, then jqTree saves the state in a cookie.
  24     </li>
  25     <li>
  26         You must include the <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> plugin for cookie support.
  27     </li>
  28 </ul>
  29
  30 <h3>html</h3>
  31
  32 {% highlight html %}
  33 <div id="tree1" data-url="/example_data/"></div>
  34 {% endhighlight %}
  35
  36 <h3>javascript</h3>
  37
  38 {% highlight js %}
  39 $('#tree1').tree({
  40     saveState: true
  41 });
  42 {% endhighlight %}
  43
  44 <p>
  45     Giving the <strong>saveState</strong> a string value sets the storage key. The default key is 'tree'.
  46 </p>
  47
  48 {% highlight js %}
  49 $('#tree1').tree({
  50     saveState: 'my-tree'
  51 });
  52 {% endhighlight %}