- 浏览: 796702 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (480)
- Spring (12)
- Hibernate (8)
- Struts2 (4)
- Java 基础-JDK-类-接口-URI-专题研究 (27)
- 线程、线程池、多线程高并发高可用、Socket通信 (15)
- Oracle数据库 (20)
- 一般-前端js-html-其它 (25)
- JYSK-互联网金融、金融科技、支付、公司、新闻等等 (8)
- Ajax-jQuery开源框架 (7)
- Json-轻量级的数据交换格式 (14)
- JavaScript (15)
- Jsp、Servlet、Servlet+JSP+JavaBean开发模式(MVC) (18)
- Html-JavaScript-前端-调用接口 (12)
- Sql Server 2005 (6)
- 正则表达式 (2)
- Java tools (18)
- 加签与验签、加密与解密 (3)
- Ajax技术核心-xmlHttpRequest(简称XHR) (6)
- xml-数据交换格式 (3)
- 信息采集 (1)
- Http - Https - HttpClient - httpCore-SSL-TLS (10)
- HtmlParser (2)
- 标签库 (1)
- SMS (2)
- jxl-导入导出 (4)
- poi-导入导出 (2)
- 定时器Timer+Quartz (6)
- 工作流引擎JBPM3.2.3 (4)
- 工作流引擎JBPM4 (0)
- 数据源-JNDI (0)
- tomcat、weblogic等应用服务器 (6)
- 工作流引擎jbpm5 (1)
- 搜索引擎Lucene (1)
- ant (1)
- 大数据-HBase (2)
- bigtable (0)
- 数据库设计 (4)
- jquery tab (0)
- mybatis (5)
- jquery ui 1.10.3 (5)
- Jboss7 (1)
- 规则引擎drools (0)
- 工作流引擎Activiti5 (0)
- 数据库-用户自定义函数 (0)
- 数据库-存储过程 (2)
- 数据库-视图 (0)
- 数据库-触发器 (0)
- 数据库-sql (2)
- highcharts-图表工具 (1)
- sql server 2008 (6)
- 诗词-工作室 (2)
- 数据割接 (1)
- GIS-地理信息系统 (2)
- RS-遥感技术 (1)
- GPS-全球定位系统 (1)
- java整合flex_RIA开发 (3)
- C#编程语言 (5)
- webservice_axis2_cxf_soap_wsdl (2)
- sql语句 (3)
- Flex_WebService_GIS (25)
- PHP编程语言 (0)
- ExtJS4.2 (1)
- Spring mvc (5)
- EasyUI1.4.2 (16)
- 日期时间工具类 (4)
- 随机数 (1)
- Arcgis api for js (0)
- Mysql数据库 (9)
- 移动互联网 java html5/flash socket netty (0)
- API接口 (1)
- AndroidStudio (0)
- Git (2)
- Maven (5)
- IDEA (0)
- 大数据-Hadoop (2)
- JPA (0)
- Spring boot (4)
- JSF (0)
- nginx_lua_module_redis (2)
- Activiti (1)
- bootstrap (1)
- AngularJS (10)
- 数据库-索引 (1)
- Linux及其连接工具SSH (4)
- java日志管理 (2)
- islider滑动控件 (1)
- jquery (1)
- 异常处理Exception (1)
- 秒杀与类秒杀系统 (1)
- 连接数据库、数据库连接池 (4)
- 数据库-临时表 (1)
- 软件设计模式-单例、多例、代理、工厂、观察者 (3)
- 集合框架 (5)
- 人工智能--Artificial intelligence、神经网络算法、机器学习 (1)
- 分布式应用 (1)
- SOA服务-Dubbo框架-Thrift框架 (2)
- Zookeeper分布式服务框架 (2)
- intellij idea (1)
- python编程语言 (0)
- 消息队列_MQ (0)
- 消息队列_RabbitMQ (2)
- 消息队列_ActiveMQ (1)
- 消息队列_Kafka (2)
- 缓存_Redis (4)
- 缓存_Memcache (0)
- 缓存_Ehcache (0)
- ivy-ivyde (1)
- google-protocol buffers (1)
- 正向代理-正向代理服务器 (1)
- 反向代理-反向代理服务器 (1)
- JVM内存模型 (0)
- Thunder框架 (1)
- NIO-非阻塞式IO (0)
- 软件测试、性能测试 (1)
- 序列化、Serializable接口、Externalizable接口 (3)
- 线程池-ExecutorService-ThreadPoolExecutor (1)
- web.xml (1)
- java开发-java工具-实用工具网站 (6)
- 医疗 (1)
- Filter-过滤器 (2)
- Unicode码-双字节字符编码 (1)
- OpenResty (1)
- 计算机网络 (1)
- eclipse_myeclipse_intellij idea (3)
- Enum (1)
- 大数据--Big Data (1)
- 云计算--Cloud computing (1)
- Elastic-Job (1)
- Redis (2)
- 文件流-IO操作 (6)
- 计算机基础知识 (1)
- Hessian-二进制RPC协议 (1)
- String类 (3)
- BigDecimal类 (1)
- java重要接口 (1)
- ReactJS (1)
- 跨域问题 (0)
- Map (1)
- 注解 (1)
- ASCII码-单字节字符编码 (1)
- 微服务、微服务架构 (2)
- RPC协议、RPC服务、RPC框架 (0)
- java反射 (1)
- java项目之classpath (1)
- 经典算法-树 (1)
- listener-监听器 (1)
- Interceptor-拦截器 (1)
- pojo javabean (2)
- 计算机科学与技术-进阶 (1)
- 代码规范与文档编写 (1)
- UML-统一建模语言 (1)
- 对接微信、支付宝 (3)
- 压力测试 (1)
- 办公软件-Excel (1)
- 办公软件-PPT (0)
- UTF8、GBK编码 (1)
- 微服务架构:Spring Cloud架构-Dubbo架构 (6)
- Nginx (1)
- 点滴业务 (1)
- form表单-json数据-转换与接口调用 (1)
- Junit单元测试 (1)
- 大数据-Spark (1)
- 大数据-Storm (1)
- 数据库事务-Spring事务 (0)
- elasticsearch (1)
- windows (1)
最新评论
1、效果图
【图1】
【图2】
2、js代码
3、java代码
【图1】
【图2】
2、js代码
$(function(){ $('#treeId').tree({ url: 'myController.do?loadtreeFun&projectId=${projectId}', checkbox:true, animate:true, lines:true, onlyLeafCheck:true,//只选择联系人 onClick:function(node){ }, onBeforeExpand:function(node,param){ $('#treeId').tree('options').url='myController.do?loadtreeFun&projectId=${projectId}'; }, onContextMenu: function(e,node){//右键菜单 e.preventDefault();//阻止默认的右键菜单行为 $(this).tree('select',node.target);//选中 var b = $(this).tree('isLeaf', node.target); if(b) { //联系人 $('#treeMenu1').menu('show', { left: e.pageX, top: e.pageY }); } else { //联系组 $('#treeMenu').menu('show', { left: e.pageX, top: e.pageY }); } }, onLoadSuccess: function(node, data){ //$('#treeId').tree('expandAll');//展开所有节点 var rootNode = $("#treeId").tree('getRoot'); $('#treeId').tree('expand',rootNode.target); } }); }); /*确定:添加联系人手机号码到父窗口‘联系人电话’*/ function addMobile(){ var nodes = $('#treeId').tree('getChecked'); var str = ''; $.each(nodes,function(n,node){ if(node){ var data = node.text.split(':');//中文冒号 if(data[1]) { if (str != '') { str += (";"+data[1]); } else { str = data[1]; } } } }); //alert(str); parent.addMobile(str); parent.closeChooseDlg(); }
3、java代码
@RequestMapping(params={"loadtreeFun"}) public void loadtreeFun(HttpServletRequest request,HttpServletResponse response) { Map condition = convertParameters(request.getParameterMap()); //System.out.println(UtilStr.dumpMap(condition)); SessionContext sc=new SessionContext(request); String id=(String)condition.get("id");//当前选中节点Id String projectId=(String)condition.get("projectId");//项目Id JSONArray rtnJsonArray = new JSONArray(); if(UtilStr.isNullOrBlank(id)){ JSONObject jsonObject= new JSONObject(); List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); if (UtilStr.isNotNullAndBlank(projectId)) { list = service.getFun(id,Integer.valueOf(projectId)); } if (null!=list&&list.size()>0) { Map<String, Object> map=list.get(0); ClassA root=(ClassA)map.get("root");//根节点 List<ClassA> ClassAs=(List<ClassA>) map.get("ClassAs");//二级组 List<ClassB> ClassBs=(List<ClassB>) map.get("ClassBs");//二级联系人 JSONObject jsonobj1=JSONObject.parseObject(root.toString());//根节点JSONObject JSONArray jsonObject2=JSONArray.parseArray(ClassAs.toString());//二级组JSONObject JSONArray jsonObject3=JSONArray.parseArray(ClassBs.toString());//二级联系人JSONObject jsonObject2.addAll(jsonObject3); jsonobj1.put("children", jsonObject2); rtnJsonArray.add(jsonobj1); }else{ //只有1个初始根节点 jsonObject.put("id", ""); jsonObject.put("text", "通信录"); jsonObject.put("state", "closed"); jsonObject.put("children", null); rtnJsonArray.add(jsonObject); } renderJson(response,rtnJsonArray.toJSONString()); }else{ //非叶子节点的nodeId JSONObject jsonObject= new JSONObject(); List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); if (UtilStr.isNotNullAndBlank(projectId)) { list = service.getFun(id,Integer.valueOf(projectId)); } if (null!=list&&list.size()>0) { //list可能为[{ClassAs=[], ClassBs=[]}] Map<String, Object> map=list.get(0); List<ClassA> ClassAs=(List<ClassA>) map.get("ClassAs");//超过二级组 List<ClassB> ClassBs=(List<ClassB>) map.get("ClassBs");//超过二级联系人 // JSONArray jsonArray2=null; if (null!=ClassAs&&ClassAs.size()>0) { jsonArray2=JSONArray.parseArray(ClassAs.toString());//二级组JSONObject } JSONArray jsonArray3=null; if (null!=ClassBs&&ClassBs.size()>0) { jsonArray3=JSONArray.parseArray(ClassBs.toString());//二级联系人JSONObject } // if (null!=jsonArray2) { if (null!=jsonArray3) { jsonArray2.addAll(jsonArray3); } renderJson(response,jsonArray2.toJSONString()); }else{ if (null!=jsonArray3) { renderJson(response,jsonArray3.toJSONString()); }else{ renderJson(response,"false");//onBeforeExpand:Fires before node is expanded, return false to cancel this expand action. } } } } }
发表评论
-
easyui datagrid 动态表头 动态columns 的一种实现方式
2016-05-23 18:09 9454function doUpgradeDataQueryFu ... -
easyui datagrid数据查询
2016-05-18 13:56 918function doFirstQueryFun(){ ... -
easyui datebox formatter parser
2015-10-13 15:42 1497//年月日 function myformatter(dat ... -
amcharts与easyui datagrid实现值班数量统计
2015-09-11 15:37 1756效果: 代码: <script> var ... -
easyui datagrid rowedit点击编辑行
2015-08-27 11:14 1735onClickRow: function (index, r ... -
easyui dialog 修改title
2015-08-25 19:47 1401方式一: parent.$('#monthDutyAddDi ... -
easyui dialog关闭窗口最好使用destroy而不推荐使用close
2015-08-24 16:05 2755http://blog.csdn.net/maosijunzi ... -
easyui datagrid 数据源获取与表格渲染 demo1 demo2
2015-08-20 14:19 4617demo1:表格和数据同步 $(function() { ... -
easyui messager alert 3秒后自动关闭提示
2015-08-20 10:24 2333function isDatagridEmpty_duty( ... -
easyui datagrid 前台批量传递数据到后台_json
2015-08-19 09:28 2054前台: var rows = $('#mygrid ... -
easyui dialog 子窗口jsp(被弹出窗口)调用父jsp页面方法操作父jsp
2015-08-14 18:08 14529父jsp(monthDuty.jsp'): <scrip ... -
easyui datagrid loadFilter loadData
2015-08-05 17:10 1564不使用loadFilter(弄了半天没反应),直接使用load ... -
easyui messager show和confirm
2015-07-10 17:32 2248//show var sho ... -
jquery easui tabs注册完刷新另一个tabs
2015-07-10 16:21 878========思路:没有的话直接添加,自动刷新;有的话先关闭 ... -
easyui datagrid pagination 自定义分页
2015-07-09 10:56 8176//============================= ...
相关推荐
本文主要介绍了如何使用jQuery EasyUI框架中的Tree组件实现异步加载子节点功能,同时解析了在实现过程中可能会遇到的问题及其解决方案。jQuery EasyUI是一个基于jQuery的前端UI库,它提供了一整套基于AJAX的用户界面...
在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...
本文将详细介绍如何使用jQuery结合EasyUI库中的Tree组件实现对JSON数据的异步加载以生成树状结构,并对实现细节进行深入讲解。这个技术点在现代Web开发中非常常见,特别是在需要处理具有层级关系的数据时,如菜单、...
在IT领域,jQuery EasyUI是一个基于jQuery...根据实际需求,你可能还需要处理异步加载过程中的错误、优化数据请求策略(如分页加载)以及提供更丰富的交互效果。希望这些信息对你在使用jQuery EasyUI Tree时有所帮助。
在本文中,我们将深入探讨如何使用EasyUI框架实现异步加载Tree组件,并将其与Struts2框架整合。EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括Tree,它能够方便地构建出层次结构的数据展示。而...
在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...
如果数据量大或者需要按需加载,可以使用 `onLoadSuccess` 或 `onClick` 事件来异步加载子节点。当点击父节点时,通过 AJAX 获取子节点数据,然后调用 `tree` 的 `loadData` 方法加载。 总结来说,EasyUI Tree ...
jQuery EasyUI Tree提供了多种扩展功能,如展开/折叠节点、异步加载数据、添加/删除节点等。例如,通过`expandNode`方法可以展开指定的节点: ```javascript $('#tree').tree('expandNode', {id: '1-1'}); // ...
通过`data`属性或异步加载方式,将这些数据绑定到树结构中。 3. **事件处理**:为了响应用户的复选操作,需要监听并处理相关的DOM事件,如`check`事件。当用户点击复选框时,事件处理器可以更新选定的节点状态,并...
本文将详细介绍如何使用Jquery EasyUI的tree组件实现异步加载,即将遍历指定的文件夹,并根据文件夹内的文件和子文件夹动态生成tree结构。 在讲解Jquery EasyUI tree的异步加载之前,需要理解tree组件的基本概念。...
EasyUI Tree 可以通过异步方式获取数据,例如从服务器请求。tree2_getdata.php 可能实现了一个 RESTful API,根据请求参数返回 JSON 格式的树节点数据。这使得 Tree 可以动态加载和更新内容,提高用户体验。 3. **...
在本项目中,AJAX 被用于 Tree 和 DataGrid 与后端的通信,实现数据的异步加载和更新。 5. **Asp.net**: Asp.net 是微软提供的一个用于构建 Web 应用的开发框架,它支持多种编程语言,如 C# 或 VB.NET。在这个...
DataGrid 支持分页、排序、过滤等功能,可以通过 AJAX 异步加载数据,也可以与 Tree 结合,实现树形表格,即树节点展开后显示与其关联的表格数据。 5. **注册与登录功能** 在这个项目中,除了 Tree 和 DataGrid 的...
在EasyUI的异步加载中,SpringMVC的控制器将处理来自`tree`组件的请求,根据请求参数查询数据库,生成JSON格式的响应数据。 4. **联动效果**:在描述中提到了`tree`和`accordion`的联动效果。`accordion`是另一种...
在使用jQuery EasyUI框架开发网页应用时,常常会遇到异步加载数据的需求,特别是对于树形结构(tree)组件。本文将深入解析一个常见的问题:如何正确地从本地JSON文件异步加载数据到EasyUI的tree组件,并解决加载...
7. **异步加载优化**:为了提高性能,可以使用 `async` 配置项,例如设置 `async:false` 表示一次性加载所有数据,`async:true` 则表示异步加载。还可以设置 `loader` 函数来自定义加载逻辑,如缓存已加载过的节点,...
7. **异步加载**:对于大型数据集,可以使用异步加载机制,只在需要时加载子节点,以提高性能。这可以通过设置`async`对象实现,包括`url`(请求子节点数据的URL)和`method`(请求方式,通常是'get'或'post')。 8...
jQuery EasyUI 提供的 `tree` 组件支持异步加载,这对于处理大数据量的无限级树状结构尤为适用。实现这一功能的关键在于配置 `url` 属性,该属性指定了获取子节点数据的服务器端接口。例如,在提供的 `TreeJsonData....
本文档将详细介绍如何利用jQuery EasyUI中的Combotree实现异步加载树形结构,并提供一个完整的示例。 #### 二、理解Combotree与异步树的概念 1. **Combotree简介**: - Combotree是jQuery EasyUI框架中的一个组合...