jQuery / Dynatree: как использовать Json или ul / li вместе с образцом IFrame

Question

Я новичок в dynatree, но счастлив, что нашел этот плагин для суперкула. ​​

На сайте dynatree я нашел пример, как использовать его с IFrames http://wwwendt.de/tech/dynatree/doc/sample-iframe.html

Мне удалось успешно адаптировать пример IFrame. Но я немного застрял здесь, потому что я хотел бы загрузить дерево либо через UL / LI или лучше с Джейсоном / Аяксом. моя проблема в том, что я не понимаю, как чтобы предоставить им ссылки / ссылки с LI или Jason, чтобы при щелчке записи открывался связанный сайт в iframe. Также не знаю, как мне отформатировать родителей / детей / детей в Json.

Кто-нибудь был бы так любезен, чтобы дать образец с iframe и jason / ajax или iframe с ul / li?

Answer 1

Я наконец смог запустить его. Мне понадобилось немного времени, чтобы узнать, как работать с подпапками в 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":[
....

Answer 2

Во-первых, я бы предложил использовать синтаксис объекта JavaScript, а не стиль UL / LI, поскольку он более производительный (недостаток: разметка UL будет отображаться, даже если JavaScript отключен).

Хитрость заключается в том, чтобы просто добавить пользовательский атрибут к данным узла (в этом примере мы можем назвать его '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, поэтому при первом раскрытии узлов отправляется другой запрос.