jquery-easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立。如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数。
编写前台代码:
- $('#tt').tree({
-
url:'/demo2/node/getNodes'
- });
为测试用,建立一个节点的数据模型:
- @Table(name="nodes")
-
public class Node extends ActiveRecordBase{
-
@Id public Integer id;
-
@Column public Integer parentId;
-
@Column public String name;
-
-
public boolean hasChildren() throws Exception{
-
long count = count(Node.class, "parentId=?", new Object[]{id});
-
return count > 0;
- }
- }
编写后台的控制器代码:
- public class NodeController extends ApplicationController{
-
-
-
-
-
-
-
-
public View getNodes(int id) throws Exception{
-
List<Node> nodes = null;
-
-
if (id == 0){
-
nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null);
-
} else {
-
nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id});
- }
-
-
List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
-
for(Node node: nodes){
-
Map<String,Object> item = new HashMap<String,Object>();
-
item.put("id", node.id);
-
item.put("text", node.name);
-
-
-
-
if (node.hasChildren()){
-
item.put("state", "closed");
- }
- items.add(item);
- }
-
-
return new JsonView(items);
- }
- }
运行测试程序:http://localhost:8080/demo2/
分享到:
相关推荐
在jQuery EasyUI框架中,Combotree组件是一个非常实用的功能组件,它结合了下拉列表(Combobox)与树形结构(Tree)的特点,能够实现动态加载数据并以树形结构展示。这在很多场景下都非常有用,例如产品分类、部门...
本文档将详细介绍如何利用jQuery EasyUI中的Combotree实现异步加载树形结构,并提供一个完整的示例。 #### 二、理解Combotree与异步树的概念 1. **Combotree简介**: - Combotree是jQuery EasyUI框架中的一个组合...
3. `easyloader.js`:EasyLoader是jQuery EasyUI的一个加载工具,用于异步加载需要的组件,避免一次性加载所有组件导致的资源浪费。 4. `jquery.easyui.mobile.js`:这是针对移动设备优化的版本,使得jQuery EasyUI...
在实际开发中,jQuery-EasyUI的一个关键优势是其对Ajax的支持,它可以轻松实现与服务器的数据交互,如异步加载数据、提交表单等。同时,EasyUI还提供了数据绑定和分页功能,这在处理大量数据时非常有用。 总的来说...
4. **数据绑定**:与后端数据源无缝对接,支持AJAX异步加载数据,实现数据的动态更新和交互。 二、jQuery EasyUI 1.2.6 版本亮点 1. **性能优化**:在1.2.6版本中,对组件进行了性能优化,提升了加载速度和用户体验...
下面将详细介绍如何使用 jQuery EasyUI 实现 Combotree 的异步加载功能。 ##### 3.1 HTML 结构 首先,我们需要定义一个 `<input>` 元素作为 Combotree 的容器,并为其设置初始值: ```html ${actionform....
jQuery EasyUI的树形组件支持多种操作,包括展开/折叠节点、添加、删除和编辑节点,以及异步加载子节点。通过简单的API调用,开发者可以定制树的样式、事件响应和数据绑定,实现灵活的数据展示。 其次,`jquery-...
- `jquery-easyui-1.4.2` 版本可能已经做了很多优化,但开发者仍需关注如延迟加载、异步请求、事件委托等技巧,以进一步提升应用性能。 9. **兼容性和浏览器支持** - EasyUI 在设计时考虑了跨浏览器的兼容性,但...
总的来说,"jquery-easyui-1.4-patch.js"是一个针对性的解决方案,旨在修复jQuery EasyUI 1.4版本中datagrid组件加载数据时的重复问题。通过正确地应用这个补丁,开发者可以避免因该问题引发的性能损耗和用户体验...
tree组件支持异步加载,当节点被展开时,会动态请求数据。同时,源码中还包括了节点的选中、点击事件处理,以及拖拽排序等功能,提供了丰富的交互体验。 四、tree grid树形网格 tree grid 结合了tree和grid的功能,...
**jQuery EasyUI 1.4.2:提升前端开发效率的神器** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,能够帮助开发者快速构建具有专业外观的Web应用。最新版的 jQuery EasyUI 1.4.2 在前...
在 "jquery-easyui-1.3.6" 中,我们可以看到许多与Ajax相关的函数,如 "loadData" 和 "loadUrl",它们负责异步加载和更新数据。这种数据驱动的方式使得页面能够实时响应服务器的变化,提高了用户体验。 在事件处理...
3. **数据绑定**:与jQuery有所不同,EasyUI的组件如datagrid可以直接与服务器端的数据源进行绑定,实现数据的自动加载、排序、分页等功能。 4. **易用性**:通过简单的属性配置,开发者可以调整组件的行为和外观,...
1. **轻量级**:EasyUI 基于 jQuery,本身体积小巧,加载速度快,对于性能要求较高的项目非常友好。 2. **组件丰富**:提供多种常见的 UI 控件,如 DataGrid、Dialog、Tree、Menu、Tabs 等,满足多样化的需求。 3. *...
4. **easyloader.js** - EasyLoader是EasyUI的一个实用工具,用于异步加载所需的组件,帮助优化页面加载性能,避免一次性加载所有资源导致的延迟。 5. **licence.txt** 和 **changelog.txt** - 这两个文件分别包含了...
在EasyUI应用中,通常使用Ajax技术与服务器进行异步通信,更新或获取数据。Demo可能包含JSON格式的数据交换,利用jQuery的Ajax方法实现数据的请求和接收。 在实际操作中,开发者需要关注以下几点: - 数据绑定:...
在"jquery-easyui-1.4.5.rar"这个压缩包中,包含了jQuery-EasyUI 1.4.5版本的API中文文档,对于开发者来说,这是一个极其宝贵的资源,可以加速理解和应用这个强大的框架。 1. **jQuery基础**:jQuery 是一个广泛...
7. **树形视图(Tree)**: Tree组件用于展示层次结构的数据,可以展开和折叠节点,支持异步加载和图标自定义。 8. **下拉树(ComboBox/ComboboxTree)**: ComboBox 是一个组合框,结合了输入框和下拉列表,...