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

Z时代
2024-01-10
分类：问答

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

jQuery（'＃introspection_tree'）。jstree（{ 
        “ json_data”：{
            “ ajax”：{
                网址：“ http：// localhost / introspection / introspection / product”
            }
    }，
    “ plugins”：[“主题”，“ json_data”，“ ui”]
    }）;

调用返回的json是

[
  {
    “ data”：“套件1”，
    “ attr”：{
      “ id”：“ 1”
    }，
    “儿童”：[
      [
        {
          “数据”：“硬件”，
          “ attr”：{
            “ id”：“ 2”
          }，
          “儿童”：[
          ]
        }
      ]，
      [
        {
          “数据”：“软件”，
          “ attr”：{
            “ id”：“ 3”
          }，
          “儿童”：[
          ]
        }
      ]
    ]
  }
  .....
]

每个元素可以有很多孩子，树会很大。当前，这将立即加载整个树，这可能需要一些时间。当用户打开子节点时，我该怎么做以实现按需加载？

提前致谢。

回答：

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状态）：

[
  {
    “ data”：“套件1”，
    “ attr”：{
      “ id”：“ 1”
    }，
    “ state”：“关闭”
  }，
  {
    “数据”：“ KPCM 049”，
    “ attr”：{
      “ id”：“ 4”
    }，
    “ state”：“关闭”
  }，
  {
    “ data”：“ Linux BSP”，
    “ attr”：{
      “ id”：“ 8”
    }，
    “ state”：“关闭”
  }
]