代码之家  ›  专栏  ›  技术社区  ›  LeftyX

jsTree:异步加载

  •  8
  • LeftyX  · 技术社区  · 14 年前

    我正试图在我的一个项目中使用这个jQuery插件(jsTree)。

    无论如何,我使用这个插件加载文件夹结构,但我想这样做 异步操作。 我试过上网查,但似乎大多数人都把整棵树都装进去了。 我想加载一个分支上的每一个节点点击。 我使用的是JSON。

    1 回复  |  直到 14 年前
        1
  •  8
  •   Nick Craver    14 年前

    目前我正在jquery1.4中使用jsTree,下面是一个示例,它非常未压缩以使其更清晰:

    $("#QuickNav").tree({
      data: {
        async: true,
        type: "json",
        opts: {
          method: "POST",
          url: rootPath + "QuickNav"
        }
      },
      callback: {
        beforedata: function(NODE, TREE_OBJ) {
          return $(NODE).attr("id") === "" ?
           { id: $(NODE).find("a:first").attr("id")} :
           { id: $(NODE).attr("id") || 0 };
        },
        onchange: function(NODE) {
          document.location.href = $(NODE).children("a:first").attr("href");
        }
      }
    });
    

    我从该Url返回的JSON示例:

    [{
        "data": {
            "title": "Title (<b link='/Thing/200' class='gtp'>Go to Page</b>)",
            "attributes": {
                "href": "#",
                "id": "200"
            }
        },
        "state": "closed"
    }]
    

    [{
        "data": {
            "title": "Sites",
            "attributes": {
                "href": "#",
                "class": "TreeTitle"
            }
        },
        "state": "open",
        "children": [
            {
                "data": {
                    "title": "00001 - Test Thing",
                    "type": "link",
                    "attributes": {
                        "href": "/Site/39063",
                        "class": "TL"
                    }
                }
            },
            {
                "data": {
                    "title": "00002 - Test Thing 2",
                    "type": "link",
                    "attributes": {
                        "href": "/Site/39069",
                        "class": "TL"
                    }
                }
            }
        ]
    }]