`
LichiKing
  • 浏览: 14649 次
  • 性别: Icon_minigender_1
  • 来自: 内蒙
社区版块
存档分类
最新评论

EasyUI tree的异步加载

阅读更多

在easyui API中可以知道,easyui tree支持树控件的异步加载,用户可以从后台动态获取,返回json数据,来完成异步请求。

1、树的json格式:

 

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

  其中的state可为open或closed,异步加载就是当展开一个封闭的节点时,如果节点没有加载子节点,它将把节点id作为http请求参数并命名为‘id’,在服务器上检索。

2、tree的声明:

 1)在html写一个ul:

 

<ul  id="tree"></ul>

 2)js中

 

 

$('tree').tree({
      url:'/EasyuiDemo/loadTree'// 本人的项目名为EasyuiDemo
});

 

 3、java代码中

 后台实现的就是根据id查找是否有子节点,然后返回数据,写法大同小异,下面是笔者的思路,这里用的是Spring + SpringMVC +Spring JDBCTemplate

  1)tree的bean类

 

public class Tree {
	private String id;//节点
	private String pid;//父节点
	private String text;//显示内容
	private String state;// 是否为封闭节点,即有子节点
	
	public Tree() {
		super();
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}


	public String getPid() {
		return pid;
	}

	public void setPid(String pid) {
		this.pid = pid;
	}

	public String getState() {
		return state;
	}

	public void setState(String state) {
		this.state = state;
	}

	@Override
	public String toString() {
		return "Tree [id=" + id + ", pid=" + pid + ", state=" + state + "]";
	}	
}
 
2)controller层
 @Controller
public class treeController{    
    @Autowired
    treeService service;
    @RequestMapping(value="/loadTree")
    public void loadTree(HttpServletRequest request,HttpServletResponse response,String id) throws Exception{
	  response.setCharacterEncodiung("UTF-8");
	  if(id==null){
		id="0";
	  }
	  List list = new ArrayList();
	  list= service.loadTeee(id);
	  response.getWriter().write(new Gson().toJson(list));
   }
}
 
 3)service层
@Service
public treeService {
    @Autowirwd 
    treeDao dao;
    public List  loadTree(String id){
          List<Tree> list = dao.LoadTree(id);
          return list
    }
}
 4) dao层
@Repository
public class treeDao{
       @Autowired
      private  JdbcTemplate template;
      
      public List loadTree(String id){
             String sql = "select * from tree where pid ="+id;
             return template.query(sql ,new TreeRowMapper());
      }
     public int countTree(String id){
             String sql ="select  count(*) from tree where pid = "+id;
             return template.queryForInt(sql);
    }
      class TreeRowMapper implements RowMapper{
              public Object mapRow(ResultSet rs,int arg) throws SQLException             {
                     Tree tree = new Tree()
                     Tree tree = new Tree();
		     tree.setId(rs.getString("id"));
		     tree.setPid(rs.getString("pid"));
		     tree.setText(rs.getString("text"));
		     if(countTree(rs.getString("id"))>0){
		          tree.setState(rs.getString("closed"));
                     } 
		
              }
      }
}

 这里的大概意思是,根据id查询其子节点,即sql:”select * from tree where pid“ = id,,让后返回List<Tree>集合,countTree(String id)函数的作用是判断当前节点是否有子节点,有则设置state为closed。

4、数据库

    三个字段:id,text,pid

    注:数据库中字段名称可以随意命名,但是easyui-tree加载的数据必须是上面的json格式及对应命名

 

如果这种实现方式不是你想要的,可以参考easyui中文网的这种实现:easyui延迟加载树

 

由于某原因,不能直接拷贝工作区中的代码,上面的代码是在无编译环境的机器上打的,博客布局和代码排版有点乱,多多见谅。

分享到:
评论

相关推荐

    解析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