jQuery / Dynatree: как использовать Json или ul / li вместе с образцом IFrame - PullRequest
2 голосов
/ 11 августа 2009

Я новичок в 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?

Ответы [ 2 ]

0 голосов
/ 18 августа 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...