ajax jsTree - 按需通过ajax加载子节点

jsTree - loading subnodes via ajax on demand

提问by Christian Waidner

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

我正在尝试让 jsTree 处理子节点的按需加载。我的代码是这样的：

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

The json returned from the call is

调用返回的 json 是

[
  {
    "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?

每个元素可以有很多子元素，树会很大。目前这是一次加载整个树，这可能需要一些时间。当用户打开子节点时，我需要做什么来实现按需加载？

Thanks in advance.

提前致谢。

回答by Christian Waidner

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:

爱尔兰卡为我指明了正确的方向，但并没有完全解决我的问题。我摆弄着她的回答并想出了这个。使用两个不同的服务器功能只是为了清楚起见。第一个列出顶级的所有产品，第二个列出给定 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;
            }
        }
    }
});

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

函数返回的json数据是这样的（注意每个节点的state=closed）：

[
  {
    "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.

不需要静态数据，树现在在每个级别都是完全动态的。

回答by Radek

I guess it would be nice to display by default first level nodesand then the children will be loaded on demand. In that case the only thing you have to modify is to add "state" : "closed"to the nodes whose child nodes are going to be loaded on demand.

我想默认情况下显示第一级节点会很好，然后将按需加载子级。在这种情况下，您唯一需要修改的是添加"state" : "closed"到将按需加载其子节点的节点。

You might wish to send node's id in ajax call so you modify your code

您可能希望在 ajax 调用中发送节点的 id，以便修改您的代码

"json_data": {
    //root elements to be displayed by default on the first load
    "data": [
        {
            "data": 'Kit 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        },
        {
            "data": 'Another node of level 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        }
    ],
    "ajax": {
        url: "http://localhost/introspection/introspection/product",
        data: function (n) {
            return {
                "nodeid": $.trim(n.attr('id'))
            }
        }
    }
}

From jsTreedocumentation

来自jsTree文档

NOTE: If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.

注意：如果同时设置了 data 和 ajax，则从数据字符串呈现初始树。当打开一个关闭的节点（没有加载的子节点）时，会发出一个 AJAX 请求。

回答by Irishka

you need to set root elements as tree data on page load and then you will be able to retrieve their children with an ajax request

您需要在页面加载时将根元素设置为树数据，然后您将能够使用 ajax 请求检索它们的子元素

$("#introspection_tree").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "json_data": {
        //root elements
        "data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) {
                var nodeId = node.attr('id'); //id="kit1"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}]
                return new_data;
            }
        }
    }
});

See my answer to a similar question here(the old part) for more details

有关更多详细信息，请参阅我在此处（旧部分）对类似问题的回答

回答by Ruwen

I spended hours on this problem. Finally i got it that way:

我在这个问题上花了几个小时。最后我是这样理解的：

$("#resourceTree").jstree({
    "types": {
      "default": {
        "icon": "fa fa-folder-open treeFolderIcon",
      }
    },
    "plugins": ["json_data", "types", "wholerow", "search"],
    "core": {
      "multiple": false,
      "data": {
        "url" : function(node){
          var url = "rootTree.json";
          if(node.id === "specialChildSubTree")
            url = "specialChildSubTree.json";
          return url;
        },
        "data" : function(node){
          return {"id" : node.id};
        }
      }
    },
  });

rootTree.json:

根树.json：

[
  {
    "text": "Opened root folder",
    "state": {
      "opened": true
    },
    "children": [
      {
        "id" : "specialChildSubTree",
        "state": "closed",
        "children":true
      }
    ]
  }
]

specialChildSubTree.json:

specialChildSubTree.json：

[
  "Child 1",
  {
    "text": "Child 2",
    "children": [
      "One more"
    ]
  }
]

So i mark the node that become the parent of the ajax loaded subtree with an id, i watch for in the core configuration.

所以我用一个 id 标记成为 ajax 加载子树的父节点，我在核心配置中观察。

NOTE: That node must have the "state" : "closed" parameter and it must have the parameter "children" : true.

注意：该节点必须具有 "state" : "closed" 参数并且它必须具有参数 "children" : true。

I am using jsTree.js in version 3.3.3

我在 3.3.3 版中使用 jsTree.js

回答by Asif Nowaj

Above solution is all fine. Here I am also providing similar working solution and very simple for lazy loading of nodes using ajax call vakata. When your API works like

以上解决方案都很好。在这里，我还提供了类似的工作解决方案，并且非常简单地使用 ajax 调用 vakata 延迟加载节点。当你的 API 像

https://www.jstree.com/fiddle/?lazy

https://www.jstree.com/fiddle/?lazy

and for getting any child nodes

并获取任何子节点

https://www.jstree.com/fiddle/?lazy&id=2

https://www.jstree.com/fiddle/?lazy&id=2

for explanation and for complete solution you can have a look at https://everyething.com/Example-of-jsTree-with-lazy-loading-and-AJAX-call

有关解释和完整解决方案，您可以查看https://everyething.com/Example-of-jsTree-with-lazy-loading-and-AJAX-call

<script type="text/javascript">
        $(function () {
            $('#SimpleJSTree').jstree({
                'core' : {
                    'data' : {
                        'url' : "https://www.jstree.com/fiddle/?lazy", 
                        'data' : function (node) { 
                            return { 'id' : node.id }; 
                        } 
                    } 
                } 
            });
        });
    </script>