在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是一个基于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框架中的一个组合...