jQuery / Dynatree：如何将 Json 或 ul/li 与 IFrame 示例一起使用答案

【问题标题】：jQuery / Dynatree: How to use Json or ul/li together with IFrame samplejQuery / Dynatree：如何将 Json 或 ul/li 与 IFrame 示例一起使用
【发布时间】：2009-08-11 09:42:27
【问题描述】：

我是 dynatree 的新手，但很高兴我找到了这个超酷的插件。

在 dynatree 网站上，我找到了一个如何将其与 IFrame 一起使用的示例 http://wwwendt.de/tech/dynatree/doc/sample-iframe.html

我能够成功地调整 IFrame 示例。但我有点卡在这里，因为我想通过 UL/LI 或更好，与杰森/阿贾克斯一起。我现在的问题是，我不明白如何为 LI 或 Jason 提供 URL/链接，以便单击条目仍会在 iframe 中打开链接的站点。也不知道如何在 Json 中格式化父母/子女/子子女..

有人能提供一个带有 iframe 和 jason/ajax 的示例吗？还是带有 ul/li 的 iframe？

【问题讨论】：

标签： jquery iframe

【解决方案1】：

首先，我建议使用 JavaScript 对象语法而不是 UL/LI 样式，因为它的性能更高（缺点：即使禁用 JavaScript，也会呈现 UL 标记）。

诀窍是，简单地将自定义属性添加到节点数据（在此示例中，我们可以将其称为“url”），如下所示： {title: "Google", url: "http://www.google.com"}

然后，在激活处理程序中，像这样访问这个属性：dtnode.data.url。

摘自示例页面 (http://wwwendt.de/tech/dynatree/doc/sample-iframe.html)：

$("#tree").dynatree({
      onActivate: function(dtnode) {
        // Use our custom attribute to load the new target content:
        if( dtnode.data.url )
          $("[name=contentFrame]").attr("src", dtnode.data.url);
      },
      children: [
        {title: "Search engines", isFolder: true, expand: true,
          children: [
            {title: "Google", url: "http://www.google.com"},
            {title: "Yahoo", url: "http://yahoo.com"}
          ]
        },
        {title: "jQuery", isFolder: true, expand: true,
          children: [
            {title: "jQuery", url: "http://www.jquery.com"},
            {title: "jQuery UI", url: "http://ui.jquery.com"},
            {title: "API browser", url: "http://api.jquery.com"},
            {title: "dynatree", url: "http://code.google.com/p/dynatree/"}
          ]
        }
      ]
    });

如果您想使用 Ajax 请求，以 JSON 格式从服务器接收此数据，这个示例 - 用 Python 编写 - 可能会给出一个方向：

# Build node list as JSON formatted string:
res = "["
res += "{ 'title': 'Node 1', 'key': 'k1', 'isLazy': true, 'url': 'http://foo.com' },"
res += "{ 'title': 'Node 2', 'key': 'k2', 'isLazy': true, 'url': 'http://bar.com' }"
res += "]"

# Add support for the JSONP protocol:
# This means, if the request URL contains an argument '?callback=xxx',
# wrap the result as 'xxx(result)'
if "callback" in argDict:
    res = argDict["callback"] + "(" + res + ")"

# Make sure, content type is JSON:
start_response("200 OK", [("Content-Type", "application/json")])

# Return result (the square brackets are Python / WSGI specific):
return [ res ]

请注意，在 Ajax/JSON 模式下，您不必返回分层结构。相反，您可以将节点标记为lazy，以便在第一次展开节点时发送另一个请求。

【讨论】：

非常感谢您的帮助和时间 mar10 :-) 终于能够让它运行起来。花了我一点时间了解如何处理子文件夹： [ { "title":"Simple node", "key":"1" }, { "title":"Folder 1", "isFolder":true, " url": "ggerri.com", "children":[ { "title":"Simple node11", "children":[ { "title":"Simple node111", "key":"3" } ] }, { "title":"Simple node12", "url": "jquery.com" } ] },......再次感谢并保重:-) G

【解决方案2】：

我终于能够让它运行起来。花了我一点时间了解如何处理 json 中的子文件夹：

    [
       {
          "title":"Simple node",
          "key":"1"
       },
       {
          "title":"Folder 1 ",
          "isFolder":true,
          "url": "http://www.ggerri.com",
          "children":[
             {
                "title":"Simple node11",
                "children":[
                {
                    "title":"Simple node111",
                    "key":"3"
                }
                ]           
             },
             {
                "title":"Simple node12",
                "url": "http://jquery.com"
             }    
        ]
       },
       {
          "title":"Folder 2",
          "isFolder":true,
          "url": "http://www.ggerri.com",
          "children":[
....

【讨论】：