Question

我正在使用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部分的例子。任何人都可以分享代码或提供建议吗？

Answer 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" ]
  });

Answer 2

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

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

剩下的是一个后端方法，它将返回该节点的直接子节点。您可以在此处的文档中详细了解相关内容：https://www.jstree.com/docs/json/

JSTree - 动态加载节点

2 个答案: