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