JSTree - 动态加载节点答案

【问题标题】：JSTree - Load nodes dynamicallyJSTree - 动态加载节点
【发布时间】：2014-03-25 06:40:33
【问题描述】：

我正在使用 jstree v.3。我有一个工作示例，其中所有数据都通过 ajax 从服务器端下载一次。

$('#tree').jstree({
            'core': {
                'data': {
                    'url': "/ajax/getAll",                           
                    'data': function(node) {
                        return {'id': node.id};
                    },
                    // "check_callback" : true                    
                }
            },
            "types": {
                "category": {
                    "icon": "/img/category.png"
                },
                "page": {
                    "icon": "/img/page.png"
                }
            },
            "plugins" : ["types"]

        });

但我有很多数据要展示。我想为被点击的项目加载数据。我在服务器端没有问题，但我找不到 jstree 部分的示例。任何人都可以分享代码或提供建议吗？

【问题讨论】：

标签： jquery jstree

【解决方案1】：

您只是没有找到正确的关键字。它被称为lazy loading。

你必须写这样的东西：

 $("#treeCell").jstree({
      "json_data" : {
        "ajax" : {
            "url" : function( node ){
                      // lets figure out the url - this function needs to
                      // return the formed URL. If "node" is "-1" then
                      // this is the top of the hierarchy and there's no parent
                      // key. Otherwise, node is a jquery object of
                      // the respective node from which we can fish out the
                      // metadata needed. (added below at "metadata" : op )
                      if( node == -1 ){
                        return "/list?parentkey="
                      } else {
                        return "/list?parentkey=" + node.data( "key" );
                      }
                    },
            "type" : "get",  // this is a GET not a POST
            "success" : function(ops) {
                  // this is called when the AJAX request is successful. "ops"
                  // contains the returned data from the server, which in
                  // my case is a json object containing an array of objects.
                  data = []
                  // go through data and create an array of objects to be given
                  // to jsTree just like when you're creating a static jsTree.
                  for( opnum in ops ){
                    var op = ops[opnum]
                    node = {
                        "data" : op.info,
                        "metadata" :  op ,
                        // THIS LINE BELOW IS THE MAGIC KEY!!! This will force
                        //  jsTree to consider the node
                        // openable and thus issue a new AJAX call hen the
                        // user clicks on the little "+" symbol or
                        // whatever opens nodes in your theme
                        "state" : "closed"
                    }
                    data.push( node );
                  }
                  return data; // this will return the formed array
                               // "data" to jsTree which will turn
                               // it into a list of nodes and
                               // insert it into the tree.
            }
         },
      },
      "core" : {"html_titles" : true,  "load_open" : true },
      "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort" ]
  });

【讨论】：

@Margo 不是我的网站。大概过段时间就起来了。你有什么不明白的？
当我尝试按原样使用代码（当然，使用我自己的 URL）时，我一无所获。没有错误，没有日志......什么都没有。我正在使用 jstree 的 3.3.2 版。我也没有看到最初的 ajax 查询。
请在这里查看我的问题：stackoverflow.com/questions/39188372/…
此代码不适用于最新版本的 jsTree。

【解决方案2】：

以下是服务器端数据请求所需的内容，将单击节点的 id 传递给 url。初始化树时也会使用相同的方法。

$('#tree').jstree({
    core: {
        data: {
            url: function(node) {
                return "/ajax/get/" + node.id
            }                                            
        }
    }
});

剩下的是一个后端方法，它将返回该节点的直接子节点。您可以在此处的文档中阅读更多相关信息：https://www.jstree.com/docs/json/

【讨论】：