简要说下使用场景:
combotree下拉框第一次加载时,请求一个接口,页面上展示顶层节点们(可以理解为最顶层的节点,比如所有的一级公司);
当点击其中一个节点前面的小三角展开时,再次请求服务器接口(可以是另外一个接口),将得到该节点的所有子节点,并自动添加进页面上(比如这个公司的其下部门)
点此,查看在线例子:https://hamupp.github.io/gitblog/app/easyui/combotree/asyncTree.html 如果不是你要的效果可以不用看下文了。
前端代码:
html部分:
<input id="inputCombotree">
JS部分:
1 var $combotree = $("#inputCombotree"); 2 3 $combotree.combotree({ 4 url: "data1.json",//初始combotree时请求的后端接口,即顶层节点的数据的接口。此处用静态json代替 5 method:"GET", 6 onBeforeExpand: function (node) { 7 var $tree = $combotree.combotree("tree"); 8 $tree.tree("options").url = "data2.json";//展开节点时请求的后端接口(如果接口与初始时接口不同,可在此步进行修改)此处用静态json代替 9 } 10 });
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