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
easyui combotree 异步树 前端写法js的更多相关文章
- 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- EasyUI tree 异步树与采用扁平化实现的同步树
所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips: 可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...
- Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径
Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...
- EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...
- EasyUI的功能树之异步树
最近几个项目都用到了EasyUI这个Jquery框架,目前感觉起来还是很好使的,展示效果很好,帮助文档什么的资料很多,而且互联网上Easy粉很多,大多数拥护和喜爱EasyUI的粉丝们都愿意在网络平台互 ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
- js 页码分页的前端写法
<script type="text/javascript"> var curPage = 1;//当前页码 var total;//总页数 $(function () ...
- Easyui 异步树直接所有展开
初始化异步树直接所有展开代码: $(function(){ $('#tt').tree({ url:'<%=request.getContextPath()%>/treeInit', li ...
随机推荐
- 洛谷P4799 世界冰球锦标赛 CEOI2015 Day2 meet-in-the-middle
正解:折半搜索 解题报告: 先放个传送门QAQ 想先说下部分分?因为包含了搜索背包两个方面就觉得顺便复习下?QwQ 第一档部分分 爆搜 就最最普通的爆搜鸭,dfs(第几场,钱),然后每次可以看可以不看 ...
- 深入理解Docker容器执行引擎runC
1 简介 根据官方的定义:runC是一个根据OCI标准创建并运行容器的CLI tool. Docker就是基于runC创建的,简单地说,runC就是docker中最为核心的部分,容器的创建,运行,销毁 ...
- Visual Studio 2017企业版 Enterprise 注册码 专业版Professional 激活码key
Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QFVisual Studio 2017(VS2017 ...
- linux的浅谈io操作
系统默认设定 名称类型文件描述符操作标准输入standard input0<,<< 标准输出standard output1>,>> 标准错误输出standard ...
- CDOJ 1048 Bob's vector(快速幂+三分法)
题目大意:原题链接 给定数组A[i]的计算方法,求出其任意一个极值点 解题思路:求极值点用三分法,一般计算100次足矣,所以三分时上限为100,不过运行时间可能会长一点 用for循环 用w ...
- 《大话设计模式》ruby版代码:外观模式
需求: 股民买卖股票 初步代码: # -*- encoding: utf-8 -*- #股票1 class Stock1 def buy puts '股票1买入' end def sell puts ...
- ASP.NET之报表--RDLC(一)---附源码
听同事介绍到RDLC,之前有了解过报表,但是确实没什么放在心上.最近有空,就研究下了. 一.RDLC实现 1.步骤 (1)首先新建一个项目RDLCDemo (2)新建一个DataSet数据集,并且绑定 ...
- Java实现二叉查找树
摘要:一个二叉查找树的Java实现.可以学习二叉树处理的递归及非递归技巧. 难度:初级. 为了克服对树结构编程的恐惧感,决心自己实现一遍二叉查找树,以便掌握关于树结构编程的一些技巧和方法.以下是基本思 ...
- C++11多线程教学
转自:http://www.cnblogs.com/lidabo/p/3908705.html 本篇教学代码可在GitHub获得:https://github.com/sol-prog/threads ...
- Vue学习笔记之Vue的模板字符串
0x00 模板字符串 传统的JavaScript语言,输出模板通常是这样的写的. $('#result').append( 'There are <b>' + basket.count + ...