jquery 树视图缓存

Question

使用 jquery treeview 插件时如何应用缓存。 我还需要在刷新时显示选定的树打开。

http://jquery.bassistance.de/treeview/demo/

代码

<div class="Content">
<%= javascript_include_tag "jquery.treeview" %>
<%= stylesheet_link_tag "jquery.treeview" %>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#page_tree").treeview({
            persist: "location",
            collapsed: true
        });
    });
</script>

<ul id="page_tree">
<% @pages.each do |page| %>

  <li id ="title">
    <%= page.name %>
    <ul>
        <li><%= link_to "#{page.title}" %></li>
    </ul>
  </li>
<% end %>

Answer 1

我认为您正在寻找 persist 选项。您可以在此处查看有关可用选项的文档 http://docs.jquery.com/ Plugins/Treeview/treeview#options

示例

$(".selector").treeview({
    persist: "cookie",
   cookieId: "navigationtree"
})

更新

他们用于基于 cookie 的持久性的示例代码，该代码在演示页面上运行 - 示例 3 （基于位置的是示例 2，它似乎不起作用）如下：

Javascript

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#page_tree').treeview({
            collapsed: true,
            persist: cookie
        })    
    })
</script>

HTML

<ul id="page_tree">
<% @pages.each do |page| %>
    <li id="title"><span> <%= page.name %> </span>
    <ul>
        <li> <%= link_to "#{page.title}" %> </li>
    </ul>    
    </li>
<% end %>
</ul>

我唯一的其他建议是，如果这不起作用，请尝试静态链接到 javascript/css 文件，看看是否有效，您还需要使用 cookie.js 脚本。

<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css" />
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/jquery.treeview.js" ></script>
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js"></script>

Answer 2

<div class="Content">
  <%= javascript_include_tag "jquery.treeview" %>
  <%= stylesheet_link_tag "jquery.treeview" %>

  <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery("#page_tree").treeview({
        persist: "location",
        collapsed: true
      });
    });
  </script>

  <ul id="page_tree">
    <% @pages.each do |page| %>

      <li id ="title">
        <%= page.name %>
        <ul>
            <li><%= link_to "#{page.title}" %></li>
        </ul>
      </li>
    <% end %>
  </ul>

Answer 3

我知道这是一个关于过时的 jQuery 插件的老问题，但我今天才遇到这个问题。

如果您想使用 persist: 'cookie' ，您需要包含 jquery.cookie.js。否则 +/- 图标将消失并且任何操作都不起作用。

这是旧代码，因此我从 Treeview 的 git 存储库中获取了 jquery.cookie.js 以实现兼容性：
https://github.com/jzaefferer/jquery-treeview/tree/master/demo

另外，collapsed: true 似乎与持久性的想法背道而驰。

包括：

<link rel="stylesheet" href="/treeview/jquery.treeview.css" />
<script type="text/javascript" src="/treeview/jquery.treeview.js"></script>
<script type="text/javascript" src="/treeview/lib/jquery.cookie.js"></script>

JS：

jQuery(document).ready(function(){
    jQuery("#page_tree").treeview({
        persist: "cookie"
    });
});