简要说下使用场景:

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

easyui combotree 异步树 前端写法js的更多相关文章

  1. 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  2. EasyUI tree 异步树与采用扁平化实现的同步树

    所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips:   可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...

  3. Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径

    Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...

  4. EasyUI ComboTree无限层级异步加载示例

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...

  5. EasyUI的功能树之异步树

    最近几个项目都用到了EasyUI这个Jquery框架,目前感觉起来还是很好使的,展示效果很好,帮助文档什么的资料很多,而且互联网上Easy粉很多,大多数拥护和喜爱EasyUI的粉丝们都愿意在网络平台互 ...

  6. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  7. 【前端芝士树】Vue.js面试题整理 / 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

  8. js 页码分页的前端写法

    <script type="text/javascript"> var curPage = 1;//当前页码 var total;//总页数 $(function () ...

  9. Easyui 异步树直接所有展开

    初始化异步树直接所有展开代码: $(function(){ $('#tt').tree({ url:'<%=request.getContextPath()%>/treeInit', li ...

随机推荐

  1. Python并行编程(十三):进程池和mpi4py模块

    1.基本概念 多进程库提供了Pool类来实现简单的多进程任务.Pool类有以下方法: - apply():直到得到结果之前一直阻塞. - apply_async():这是apply()方法的一个变体, ...

  2. [World Wind学习]21.影像切割

    本来希望从GlobeMapper中生成切片直接加载到WorldWind中,但是没有成功!所以想比较一下和dstile生成的瓦片到底有什么区别? 所以这才第一次生成并加载了影像瓦片.貌似和GlobeMa ...

  3. 第六章 优化服务器设置--高性能MySQL 施瓦茨--读书笔记

    MySql的默认配置不适用于使用大量资源,因为其通用性很高. 不要期望改变配置文件会带来巨大的性能提升.提升大小取决于工作负载,通常可以通过选择适当的配置参数得到两到三倍的性能提升.在这时候,性能提升 ...

  4. sql用法

    1:  SELECT `SCHEMA_NAME`  FROM `information_schema`.`SCHEMATA`;    查询sql中的数据库名 2:  select * from for ...

  5. CentOS7.5基础优化与常用配置

    目录 最小化全新安装CentOS7基础优化 配置yum源 安装常用软件 关闭防火墙 关闭SELinux 优化ulimit 历史命令记录改为1万条 把命令提示符改为绿色 添加vim配置文件 添加一个普通 ...

  6. wordpress的安装及使用

    1.如何查看别人的wordpress站点所有的模板 2.如何使用自定义的模板

  7. 解决:对COM 组件的调用返回了错误 HRESULT E_FAIL

    调用SHDOCVW(web浏览器) COM组件的时候,返回了错误 HRESULT E_FAIL.总结如下: 1. 在控制面板--->管理工具--->服务 中,开启Distributed T ...

  8. react分享

    后台项目应用分享 后台项目应用分享 webpack + react + redux + antd 后台项目应用分享 策略篇 框架选择 组件化开发 组件?组件! CSS in JS下的样式开发思路 展示 ...

  9. Linux系统——http协议原理

    Web服务基础 用户访问网页基本流程 (1)在浏览器中输入域名,系统会查找系统本地的DNS缓存及hosts文件信息,查找是否存在域名对应的IP解析记录 (2)DNS解析域名为IP地址,系统会把浏览器的 ...

  10. centOS下升级python版本,详细步骤

    1.可利用linux自带下载工具wget下载,如下所示:(  笔者安装的是最小centos系统,所以使用编译命令前,必须安装wget服务,读者如果安装的是界面centos系统,或者使用过编译工具则可跳 ...