1. 先是前台js请求
// 上级部门下拉列表
$('#department').combotree({
url : 'departmentMaintainAction!queryDepartmentTree.action',
valueField : 'id',
textField : 'text',
required : true,
editable : false,
onClick : function(node) {
if (node.attributes.url) {
insertTab(node);
}
},
//全部展开
onLoadSuccess : function(node, data) {
var t = $(this);
if (data) {
$(data).each(function(index, d) {
if (this.state == 'closed') {
t.tree('expandAll');
}
});
}
}
});
2. 后台json
JSONArray jsonArrayIn = new JSONArray();
for (Department department : departmentList) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", department.getDptId());
jsonObject.put("text", department.getBmmc());
//[color=blue] 注意这里的state很重要,combotree就是根据state
// 的值来判断是否向后台再次请求子节点数据,
// 同时它还向后台传递了该节点的id值,作为后台查询依据[/color]
if(department.getIsLeaf().equals("0")){
jsonObject.put("state", "closed");
}else {
jsonObject.put("state", "open");
}
jsonArrayIn.put(jsonObject);
}
3. 后台数据查询需要注意的是
//combotree自动返回的父节点id,这是关键
String id = request.getParameter("id");
if(id != null){
department.setDptId(id);
}
//这是dao中的处理
if(department.getDptId() == null){
sql.append("and parent_id is null order by seq asc");
query = this.getSession().createQuery(sql.toString());
}else{
sql.append("and parent_id = :parent_id order by seq asc");
query = this.getSession().createQuery(sql.toString());
query.setParameter("parent_id", department.getDptId());
}
分享到:
相关推荐
在给定的代码片段中,我们可以看到一个完整的Combotree异步加载实现: ```javascript $(function(){ // Combotree 初始化 $('#combotree1').combotree({ url: '/get_rootnode.do', // 初始时只获取根节点 '...
本文档将详细介绍如何利用jQuery EasyUI中的Combotree实现异步加载树形结构,并提供一个完整的示例。 #### 二、理解Combotree与异步树的概念 1. **Combotree简介**: - Combotree是jQuery EasyUI框架中的一个组合...
在"easyui_combotree_search"项目中,jQuery是基础,用于处理页面元素的交互和动态效果。 2. **EasyUI**:EasyUI是基于jQuery的UI框架,提供了丰富的组件,如对话框、表格、下拉列表、树形控件等,极大地提高了开发...
下面将详细介绍如何使用 jQuery EasyUI 实现 Combotree 的异步加载功能。 ##### 3.1 HTML 结构 首先,我们需要定义一个 `<input>` 元素作为 Combotree 的容器,并为其设置初始值: ```html <input id="combotree1...
在 EasyUi 的 Combotree 中实现动态加载树节点,主要是通过监听 `onBeforeExpand` 事件来实现的。当用户尝试展开一个节点时,这个事件会被触发。在事件处理函数中,我们可以修改内置 Tree 控件的 `options.url`,使...
在实际开发中,我们可能还会遇到其他定制需求,比如加载数据的异步处理、节点的展开与折叠事件监听、搜索功能的实现等。这些都可以通过 combotree 提供的各种方法和事件来实现,如 `loadData` 方法用于动态加载数据...
jQuery EasyUI 提供的 `tree` 组件支持异步加载,这对于处理大数据量的无限级树状结构尤为适用。实现这一功能的关键在于配置 `url` 属性,该属性指定了获取子节点数据的服务器端接口。例如,在提供的 `TreeJsonData....
1. **异步加载树结构**: 异步树结构主要应用于那些数据量大或者层级深的场景,避免一次性加载所有节点导致页面卡顿。EasyUI 提供了两种主要的异步树组件:`combotree` 和 `treegrid`。 2. **Combotree(树形...
在Asp.net MVC中,可以使用AjaxHelper或者jQuery的$.ajax方法与服务器进行异步通信,这在EasyUI中尤为常见,因为它支持数据的动态加载和分页。例如,你可以在控制器中创建一个Action,该Action返回JsonResult,包含...
easyUI 根据一些条件改变DataGrid 行背景颜色 easyUI 创建一个 Property Grid easyUI 展开DataGrid里面的行显示详细信息 easyUI 在主datagrid上创建子datagrid Window easyUI 我的第一个window easyUI ...
这里面包含easyui的chm文档easyui-1.3.5.zip,datagrid项目案例,SSH和easyui整合的案例,easyui异步加载tree,tree和datagrid共用的例子,改好的兼容jQueryUI1.10.3的easyui,另外加一个primeui-10资料。资源分定为1分...
Tree组件用于展示层次结构的数据,可以展开/折叠节点,支持异步加载数据。可以与其他组件结合,如用作选择器或导航。 6. **下拉树(Combotree)** Combotree是下拉框和树的组合,用户可以选择一个或多个树节点...
7. **树形视图(Tree)**: Tree组件用于展示层次结构的数据,可以展开和折叠节点,支持异步加载和图标自定义。 8. **下拉树(ComboBox/ComboboxTree)**: ComboBox 是一个组合框,结合了输入框和下拉列表,...
API中讲解了如何设置下拉选项、异步加载数据及触发事件。 3. **TreeGrid**: 树形数据网格结合了树和表格的特点,可以展示层次化的数据。API中包含如何创建树节点、展开折叠、异步加载等内容。 4. **Dialog**: ...
5. **easyui-tree (树形结构)**:`easyui-tree` 用于展示层次结构的数据,可以进行展开、折叠操作,支持异步加载数据。开发者可以通过API进行节点的添加、删除、选中等操作。 6. **easyui-datagrid (表格)**:`...
5. 动态加载和异步通信:利用Ajax技术实现组件的动态更新和数据的异步加载。 6. 响应式布局:了解如何使EasyUI组件适应不同设备和屏幕尺寸。 7. 自定义样式:根据需求调整EasyUI默认样式,实现个性化界面设计。 8. ...
EasyUI 的核心在于它的组件系统,这些组件包括但不限于:对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、工具栏(toolbar)、树形控件(tree)、下拉树(combotree)、下拉列表(combobox)等。...
- **Ajax**:EasyUI 使用 jQuery 的 Ajax 方法与服务器进行异步通信,获取或更新数据。 - **JSON**:通常,数据以 JSON 格式在前后端之间传输,EasyUI 可以方便地解析 JSON 数据并填充到组件中。 4. **EasyUI ...
5. **Ajax 功能**:EasyUI 可以与后台进行异步交互,实现数据的动态加载和提交。 6. **主题和样式**:EasyUI 支持多种预定义的主题,允许开发者根据需要定制界面风格。 7. **示例代码**:每个控件通常都会有一个或...
3. **数据绑定**:EasyUI与jQuery的数据绑定机制相结合,可以轻松地将后台数据动态加载到前端组件中。例如,使用`datagrid`时,可以通过Ajax从服务器获取数据并自动填充到表格中。 4. **事件处理**:EasyUI组件支持...