jsTree - 通过AJAX按需加载子节点 [英] jsTree - loading subnodes via ajax on demand

问题描述

我试图让与子节点的按需加载一个jsTree工作。我的code是这样的：

I'm trying to get a jsTree working with on demand loading of subnodes. My code is this:

jQuery('#introspection_tree').jstree({ 
        "json_data" : {
            "ajax" : {
                url : "http://localhost/introspection/introspection/product"
            }
    },
    "plugins" : [ "themes", "json_data", "ui" ]
    });

从调用返回的JSON是

The json returned from the call is

[
  {
    "data": "Kit 1",
    "attr": {
      "id": "1"
    },
    "children": [
      [
        {
          "data": "Hardware",
          "attr": {
            "id": "2"
          },
          "children": [

          ]
        }
      ],
      [
        {
          "data": "Software",
          "attr": {
            "id": "3"
          },
          "children": [

          ]
        }
      ]
    ]
  }
  .....
]

每个元素可以有很多的孩子，树将是很大的。目前，这是加载整个树，一次，这可能需要一些时间。什么我必须做的实现按需加载子节点的时候都被用户打开的？

Each element could have a lot of children, the tree is going to be big. Currently this is loading the whole tree at once, which could take some time. What do I have to do to implement on-demand-loading of child-nodes when they are opened by the user?

在此先感谢。

推荐答案

Irishka我指出了正确的方向，但并没有完全解决我的问题。我摆弄周围的她的回答，并提出了这一点。使用两种不同的服务器功能只是为了清楚起见进行。第一个列出了所有产品的最高水平，第二个列出一个给定的产品ID的所有子：

Irishka pointed me in the right direction, but does not fully resolve my problem. I fiddled around with her answer and came up with this. Using two different server functions is done only for clarity. The first one lists all products at top level, the second one lists all children of a given productid:

       jQuery("#introspection_tree").jstree({
        "plugins" : ["themes", "json_data", "ui"],
        "json_data" : {
            "ajax" : {
                "type": 'GET',
                "url": function (node) {
                    var nodeId = "";
                    var url = ""
                    if (node == -1)
                    {
                        url = "http://localhost/introspection/introspection/product/";
                    }
                    else
                    {
                        nodeId = node.attr('id');
                        url = "http://localhost/introspection/introspection/children/" + nodeId;
                    }

                    return url;
                },
                "success": function (new_data) {
                    return new_data;
                }
            }
        }
    });

从函数返回的JSON数据是这样的（注意状态=中的每个节点关闭）：

The json data returned from the functions is like this (notice the state=closed in each node):

[
  {
    "data": "Kit 1",
    "attr": {
      "id": "1"
    },
    "state": "closed"
  },
  {
    "data": "KPCM 049",
    "attr": {
      "id": "4"
    },
    "state": "closed"
  },
  {
    "data": "Linux BSP",
    "attr": {
      "id": "8"
    },
    "state": "closed"
  }
]

没有静态数据是必要的，树是现在每个级别上的完全动态的。

No static data is needed, the tree is now fully dynamic on each level.

这篇关于jsTree - 通过AJAX按需加载子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！