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

前端之家收集整理的这篇文章主要介绍了jsTree – 通过ajax按需加载子节点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图得到一个jsTree工作与按需加载子节点。我的代码是这样:
jQuery('#introspection_tree').jstree({ 
        "json_data" : {
            "ajax" : {
                url : "http://localhost/introspection/introspection/product"
            }
    },"plugins" : [ "themes","json_data","ui" ]
    });

调用返回的json是

[
  {
    "data": "Kit 1","attr": {
      "id": "1"
    },"children": [
      [
        {
          "data": "Hardware","attr": {
            "id": "2"
          },"children": [

          ]
        }
      ],[
        {
          "data": "Software","attr": {
            "id": "3"
          },"children": [

          ]
        }
      ]
    ]
  }
  .....
]

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

提前致谢。

爱尔兰人指出我的方向是正确的,但不能完全解决我的问题。我用她的答案挑出来,想出了这个。为了清楚起见,仅使用两个不同的服务器功能。第一个列出所有顶级产品,第二个列出给定productid的所有子项:
jQuery("#introspection_tree").jstree({
    "plugins" : ["themes","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 = closed):

[
  {
    "data": "Kit 1","state": "closed"
  },{
    "data": "KPCM 049","attr": {
      "id": "4"
    },{
    "data": "Linux BSP","attr": {
      "id": "8"
    },"state": "closed"
  }
]

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

猜你在找的Ajax相关文章