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的持久性的示例代码在演示页面上运行 - sample 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。否则+/-图标将消失，没有任何效果。

这是旧代码，因此我从树视图的git repo中获取了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"
    });
});

jquery树视图缓存

3 个答案: