`
Franciswmf
  • 浏览: 796702 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Easyui tree 异步加载

 
阅读更多
1、效果图
【图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.
					}
				}
			}
	    }
	}

  • 大小: 6.3 KB
  • 大小: 11.8 KB
分享到:
评论

相关推荐

    解析jquery easyui tree异步加载子节点问题

    本文主要介绍了如何使用jQuery EasyUI框架中的Tree组件实现异步加载子节点功能,同时解析了在实现过程中可能会遇到的问题及其解决方案。jQuery EasyUI是一个基于jQuery的前端UI库,它提供了一整套基于AJAX的用户界面...

    jquery easyui tree 树形列表节点异步加载

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jquery使用EasyUI Tree异步加载JSON数据(生成树)

    本文将详细介绍如何使用jQuery结合EasyUI库中的Tree组件实现对JSON数据的异步加载以生成树状结构,并对实现细节进行深入讲解。这个技术点在现代Web开发中非常常见,特别是在需要处理具有层级关系的数据时,如菜单、...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    在IT领域,jQuery EasyUI是一个基于jQuery...根据实际需求,你可能还需要处理异步加载过程中的错误、优化数据请求策略(如分页加载)以及提供更丰富的交互效果。希望这些信息对你在使用jQuery EasyUI Tree时有所帮助。

    EasyUI实现异步加载tree(整合Struts2)源码

    在本文中,我们将深入探讨如何使用EasyUI框架实现异步加载Tree组件,并将其与Struts2框架整合。EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括Tree,它能够方便地构建出层次结构的数据展示。而...

    EASYUI TREEGRID异步加载数据实现方法

    在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...

    easyui tree

    如果数据量大或者需要按需加载,可以使用 `onLoadSuccess` 或 `onClick` 事件来异步加载子节点。当点击父节点时,通过 AJAX 获取子节点数据,然后调用 `tree` 的 `loadData` 方法加载。 总结来说,EasyUI Tree ...

    jquery-easyui-tree学习

    jQuery EasyUI Tree提供了多种扩展功能,如展开/折叠节点、异步加载数据、添加/删除节点等。例如,通过`expandNode`方法可以展开指定的节点: ```javascript $('#tree').tree('expandNode', {id: '1-1'}); // ...

    easyui tree 改进版

    通过`data`属性或异步加载方式,将这些数据绑定到树结构中。 3. **事件处理**:为了响应用户的复选操作,需要监听并处理相关的DOM事件,如`check`事件。当用户点击复选框时,事件处理器可以更新选定的节点状态,并...

    详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)

    本文将详细介绍如何使用Jquery EasyUI的tree组件实现异步加载,即将遍历指定的文件夹,并根据文件夹内的文件和子文件夹动态生成tree结构。 在讲解Jquery EasyUI tree的异步加载之前,需要理解tree组件的基本概念。...

    Easyui tree 测试demo

    EasyUI Tree 可以通过异步方式获取数据,例如从服务器请求。tree2_getdata.php 可能实现了一个 RESTful API,根据请求参数返回 JSON 格式的树节点数据。这使得 Tree 可以动态加载和更新内容,提高用户体验。 3. **...

    EasyUI tree 及 DataGrid

    在本项目中,AJAX 被用于 Tree 和 DataGrid 与后端的通信,实现数据的异步加载和更新。 5. **Asp.net**: Asp.net 是微软提供的一个用于构建 Web 应用的开发框架,它支持多种编程语言,如 C# 或 VB.NET。在这个...

    Easyui异步生成树节点,动态获取树节点

    DataGrid 支持分页、排序、过滤等功能,可以通过 AJAX 异步加载数据,也可以与 Tree 结合,实现树形表格,即树节点展开后显示与其关联的表格数据。 5. **注册与登录功能** 在这个项目中,除了 Tree 和 DataGrid 的...

    自己做的easyUI+mybatis+springMVC项目示例代码以及easyUI中tree的异步加载代码

    在EasyUI的异步加载中,SpringMVC的控制器将处理来自`tree`组件的请求,根据请求参数查询数据库,生成JSON格式的响应数据。 4. **联动效果**:在描述中提到了`tree`和`accordion`的联动效果。`accordion`是另一种...

    关于 jQuery Easyui异步加载tree的问题解析

    在使用jQuery EasyUI框架开发网页应用时,常常会遇到异步加载数据的需求,特别是对于树形结构(tree)组件。本文将深入解析一个常见的问题:如何正确地从本地JSON文件异步加载数据到EasyUI的tree组件,并解决加载...

    JQUERY EASYUI 异步树

    7. **异步加载优化**:为了提高性能,可以使用 `async` 配置项,例如设置 `async:false` 表示一次性加载所有数据,`async:true` 则表示异步加载。还可以设置 `loader` 函数来自定义加载逻辑,如缓存已加载过的节点,...

    easyui Tree系统管理

    7. **异步加载**:对于大型数据集,可以使用异步加载机制,只在需要时加载子节点,以提高性能。这可以通过设置`async`对象实现,包括`url`(请求子节点数据的URL)和`method`(请求方式,通常是'get'或'post')。 8...

    Jquery EasyUI 异步树,适合大数据量无限级加载

    jQuery EasyUI 提供的 `tree` 组件支持异步加载,这对于处理大数据量的无限级树状结构尤为适用。实现这一功能的关键在于配置 `url` 属性,该属性指定了获取子节点数据的服务器端接口。例如,在提供的 `TreeJsonData....

    Java>jquery-easyui_combotree异步树的生成代码示例(NEW)

    本文档将详细介绍如何利用jQuery EasyUI中的Combotree实现异步加载树形结构,并提供一个完整的示例。 #### 二、理解Combotree与异步树的概念 1. **Combotree简介**: - Combotree是jQuery EasyUI框架中的一个组合...

Global site tag (gtag.js) - Google Analytics