jQuery/Dynatree : How to use Json or ul/li together with IFrame sample

Question

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

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

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

是否有人可以提供 iframe 和 jason/ajax 的示例 或者带有 ul/li 的 iframe？

Answer 1

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

技巧是，简单地向节点数据添加一个自定义属性(在本例中我们可以将其称为“url”)，如下所示: {标题:“Google”，网址:“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，以便在第一次展开节点时发送另一个请求。