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

Question

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

jQuery('#introspection_tree').jstree({ “json_data”：{ “阿贾克斯”：{ 网址：“http://localhost/introspection/introspection/product” } }, “插件”：[“主题”，“json_data”，“ui”] });

调用返回的json是

[ { “数据”：“套件 1”， “属性”：{ “身份证”：“1” }, “孩子们”： [ [ { “数据”：“硬件”， “属性”：{ “身份证”：“2” }, “孩子们”： [ ] } ], [ { “数据”：“软件”， “属性”：{ “身份证”：“3” }, “孩子们”： [ ] } ] ] } ...... ]

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

提前致谢。

Answer 1

Irishka 为我指明了正确的方向，但并没有完全解决我的问题。我摆弄着她的答案，想出了这个。使用两个不同的服务器功能只是为了清楚起见。第一个列出顶层的所有产品，第二个列出给定 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数据是这样的（注意每个节点的state=close）：

[ { “数据”：“套件 1”， “属性”：{ “身份证”：“1” }, “状态”：“关闭” }, { “数据”：“KPCM 049”， “属性”：{ “身份证”：“4” }, “状态”：“关闭” }, { "数据": "Linux BSP", “属性”：{ “身份证”：“8” }, “状态”：“关闭” } ]

不需要静态数据，树现在在每一层都是完全动态的。

Answer 2

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

您可能希望在 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'))
            }
        }
    }
}

来自jsTree 文档

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

Answer 3

您需要在页面加载时将根元素设置为树数据，然后您将能够通过 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;
            }
        }
    }
});

查看我对a similar question here（旧部分）的回答了解更多详情

Answer 4

我在这个问题上花了几个小时。终于我明白了：

$("#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：

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

specialChildSubTree.json：

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

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

注意： 该节点必须具有“状态”：“关闭”参数，并且必须具有 参数“children”：true。

我在 3.3.3 版本中使用 jsTree.js

Answer 5

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

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

以及获取任何子节点

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

有关解释和完整解决方案，您可以查看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>