Question

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

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

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

有人会非常友好地用iframe和jason / ajax提供样本或iframe与ul / li？

Answer 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，以便在第一次展开节点时发送另一个请求。

Answer 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":[
....

jQuery / Dynatree：如何将Json或ul / li与IFrame样本一起使用

2 个答案: