项目需要,需动态生成tree,花了一早上时间才搞明白,自己比较笨,代码如下:
一、jsp页面中加入如下代码:
<ul id="pritree" class="easyui-tree" url="login/getTree.do?"> </ul>
二、后台代码如下:
首先定义结点类:
引自easyui-api:
树数据的格式(Tree data format)
每个节点可以包含下列特性:
· id:节点的 id,它对于加载远程数据很重要。
· text:显示的节点文字。
· state:节点状态, 'open' 或 'closed',默认是 'open'。当设为 'closed' 时,此节点有子节点,并且将从远程站点加载它们。
· checked:指示节点是否被选中。 Indicate whether the node is checked selected.
· attributes:给一个节点追加的自定义属性。
· children:定义了一些子节点的节点数组。
public class TreeNode implements Serializable{ private static final long serialVersionUID = 5184247463903594683L; private String id; private String text; private String state; private String iconCls; private List<Object> children; private Attribute attributes; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getState() { return state; } public void setState(String state) { this.state = state; } public String getIconCls() { return iconCls; } public void setIconCls(String iconCls) { this.iconCls = iconCls; } public List<Object> getChildren() { return children; } public void setChildren(List<Object> children) { this.children = children; } public Attribute getAttributes() { return attributes; } public void setAttributes(Attribute attributes) { this.attributes = attributes; } @Override public boolean equals(Object obj) { if (this == obj) return true; if (obj == null) return false; if (getClass() != obj.getClass()) return false; TreeNode other = (TreeNode) obj; if (id == null) { if (other.id != null) return false; } else if (!id.equals(other.id)) return false; return true; } @Override public int hashCode() { final int prime = 31; int result = 1; result = prime * result + ((id == null) ? 0 : id.hashCode()); return result; } }
其次,定义属性类:
public class Attribute implements Serializable{ private static final long serialVersionUID = -212707384862368309L; private String priUrl; public String getPriUrl() { return priUrl; } public void setPriUrl(String priUrl) { this.priUrl = priUrl; } }
在相应Action中添加List<TreeNode> treeNodeList数组,将自己相关的业务逻辑数据转化为 treeNodeList,struts配置文件如下:
<action name="getTree" class="backendLogManageAction" method="getTree"> <interceptor-ref name="scopedModelDriven"> <param name="scope">session</param> <param name="name">backOperatorDto</param> <param name="className">com.zline.common.dto.user.BackOperatorDto</param> </interceptor-ref> <interceptor-ref name="defaultStack"> </interceptor-ref> <interceptor-ref name="requestModel"></interceptor-ref> <result name="success" type="json"> <param name="root">treeNodeList</param> <param name="contentType">text/html</param> </result> </action>
这样既可在前台页面中动态生成树,下面是对树操作的两个小方法:
<script> $(function(){ $("#pritree").tree({ onClick : function(node) { var url = node.attributes.priUrl; addTab(url,node.text); }, onDblClick : function(node) { $(this).tree('toggle', node.target); } }); }); </script>
具体方法可参看相关api
相关推荐
开发者可以通过简单的JSON结构定义菜单内容,实现动态生成和响应式布局。 4. 表单(Form):jQuery EasyUI的表单组件提供了一种便捷的方式来组织和验证用户输入。它支持各种表单元素,如文本框、下拉框、复选框等,...
eTree的使用简单,只需提供JSON格式的数据,就能自动生成对应的树形结构。 三、eTree的基本使用 创建一个基本的eTree,首先需要引入jQuery和EasyUI的相关库文件。然后,通过HTML标签`<div>`定义一个容器,并设置`...
1. 数据绑定:通过JSON数据结构,将菜单项与`easyui-accordion`和`easyui-tree`组件关联起来,动态生成导航结构。 2. 事件处理:监听用户的点击事件,根据选择的菜单项执行相应的操作,如跳转页面、加载内容或展开/...
EasyUI 是一个基于 jQuery...通过以上介绍,我们了解了如何利用 EasyUI 实现异步生成树节点和动态获取树节点的功能,同时结合 DataGrid 显示表格数据。这在实际项目中可以大大提高用户界面的交互性和数据展示的灵活性。
在这个"Jquery-easyUI动态菜单"项目中,我们将会探讨如何在标准的 Maven 项目中实现动态生成的菜单,以及其在分页和界面交互中的应用。 **1. Maven项目结构与配置** Maven是Java项目管理工具,用于构建、依赖管理和...
在本实例中,***用于从数据库中动态获取权限树的数据,并通过Web服务(如ashx文件)将数据以JSON格式返回给EasyUI Tree控件,从而实现树形导航的动态加载。 知识点三:JSON数据格式 JSON(JavaScript Object ...
可能的实现方式是通过后台代码(C# 或 VB.NET)动态生成 JSON 数据,然后在前台用 JavaScript 调用 easyui 的 `$.fn.tree.loadData` 方法将数据加载到 Tree 控件中。 4. **ProcessFile** "ProcessFile" 这个文件名...
通过合理配置`tree`组件,结合后端动态生成的JSON数据,可以实现高效、灵活的异步加载效果。在实际开发中,还要注意优化请求性能,如缓存已加载的节点,避免重复请求,以及处理好网络延迟等问题,以达到最佳效果。
本例子是关于如何使用 EasyUI 来生成一个简单的树形结构,非常适合初学者学习。 首先,我们需要理解 EasyUI Tree 的基本概念。Tree 组件由节点(Nodes)组成,每个节点可以有子节点,形成层级关系。节点可以通过 ...
- JSON 数据格式:EasyUI 组件通常通过 AJAX 从后端获取 JSON 格式的数据,因此,了解如何在 Java 中生成和解析 JSON(例如使用 Jackson 或 Gson 库)是必要的。 - RESTful API 设计:Java 后端需要提供符合 REST ...
接着,使用JavaScript来生成树节点: ```javascript $(function(){ $('#tree').tree({ url: 'tree_data.json', // 数据来源,可以是JSON格式的URL onClick: function(node){ // 点击节点时触发的事件 } }); }...
JSON是易于人阅读和编写,同时也易于机器解析和生成的。在Web服务和客户端应用程序之间进行数据传输时,JSON被广泛使用。 在描述中提到的"json data",是指用JSON格式编码的数据。JSON数据通常包含键值对,其中键是...
本文将详细介绍如何使用jQuery结合EasyUI库中的Tree组件实现对JSON数据的异步加载以生成树状结构,并对实现细节进行深入讲解。这个技术点在现代Web开发中非常常见,特别是在需要处理具有层级关系的数据时,如菜单、...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在EasyUI后台管理系统中,JSON文件通常用于存储和传输后台数据。 **EasyUI组件与功能** 1. **布局...
- **数据绑定**: 可以通过JSON对象直接绑定数据,或者通过AJAX动态加载数据。 - **自定义主题**: 修改themes下的CSS文件,或者利用提供的工具生成新的主题。 - **扩展和优化**: 通过阅读src目录中的源码,理解...
下面将详细解释这些技术及其在实现动态树菜单中的作用。 Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它简化了开发过程,提供了强大的控制层结构。在本项目中,Struts2可能被用来处理...
- **数据绑定**:EasyUI支持JSON数据格式,可以方便地与后端服务交互,获取或提交数据。在CRUD操作中,通过Ajax请求,动态加载和更新数据。 - **事件处理**:通过监听按钮点击、行选择等事件,实现对数据的添加、...
2. **数据绑定**:jQueryEasyUI支持通过JSON或Ajax方式动态加载和展示数据,与后端服务进行数据交换,实现前后端分离。 3. **主题系统**:提供了多种预设主题,可以方便地更改应用的整体风格,满足不同设计需求。 ...
- **JSON 数据格式**:通常,后台返回的数据以 JSON 格式传递,前端通过解析 JSON 来填充 EasyUI 组件,如表格、树形结构等。 4. **EasyUI 主要组件**: - **Dialog**:提供弹出对话框功能,用于显示提示信息、...
在这里,"jsonjar"可能是指一个包含Java对JSON支持的库,如org.json或json-simple,这些库帮助开发者在Java环境中处理JSON数据。 另一方面,Struts是Apache软件基金会的一个开源项目,是一个基于MVC(Model-View-...