easyui combotree 异步树 前端写法js

简要说下使用场景：

combotree下拉框第一次加载时，请求一个接口，页面上展示顶层节点们（可以理解为最顶层的节点，比如所有的一级公司）；

当点击其中一个节点前面的小三角展开时，再次请求服务器接口(可以是另外一个接口)，将得到该节点的所有子节点，并自动添加进页面上（比如这个公司的其下部门）

 

点此，查看在线例子:https://hamupp.github.io/gitblog/app/easyui/combotree/asyncTree.html 如果不是你要的效果可以不用看下文了。

前端代码：

html部分:

<input id="inputCombotree">

JS部分:

    var $combotree = $("#inputCombotree");

    $combotree.combotree({
        url: "data1.json",//初始combotree时请求的后端接口，即顶层节点的数据的接口。此处用静态json代替
        method:"GET",
        onBeforeExpand: function (node) {
            var $tree = $combotree.combotree("tree");
            $tree.tree("options").url = "data2.json";//展开节点时请求的后端接口（如果接口与初始时接口不同，可在此步进行修改）此处用静态json代替
        }
    });

 

data1与data2.json的内容：

data1.json

[{
    "id":1,
    "text":"公司A"
},{
    "id":2,
    "text":"公司B"
},{
    "id":3,
    "text":"公司C"
},{
    "id":4,
    "text":"公司D"
},{
    "id":5,
    "text":"公司E",
    "state": "closed"
}]

data2.json

[{
    "id":11,
    "text":"部门A"
},{
    "id":12,
    "text":"部门B"
},{
    "id":13,
    "text":"部门C"
},{
    "id":14,
    "text":"部门D"
},{
    "id":15,
    "text":"部门E"
}]

关于展开节点时，默认自动向服务器发送的数据？

展开节点时，会自动向服务器传递该节点的id，比如此例子中的“公司E”展开时，会自动传递它的id：

 

点此，查看在线例子:https://hamupp.github.io/gitblog/app/easyui/combotree/asyncTree.html