Java>jquery-easyui_combotree异步树的生成代码示例(NEW)资源-CSDN文库

4星 · 超过85%的资源需积分: 21 141 浏览量 2012-03-17 14:04:26 上传评论 1 收藏 7KB TXT 举报

对于jquery-easyui的combotree 异步树，使用上其实并不会太复杂，但是要搞明白还是比较麻烦的，本代码基本上把异步树的生成和使用都做了示例，JSP部分基本上直接拿来用即可。同时增加了实例代码和修正了上一个上传的同类文件中的不正确的地方。请以此为准！！（其中对于后台返回的子节点jason字符串，通过设置其中的state:closed属性，则可让combotree自动变成异步树。) ### Java与jQuery-EasyUI Combotree异步树生成代码示例详解 #### 一、概述在实际项目开发过程中，经常会遇到需要展示层级结构数据的情况，如组织架构、产品分类等。`jQuery EasyUI Combotree`组件因其简单易用、功能强大而成为开发者常用的选择之一。本文档将详细介绍如何利用jQuery EasyUI中的Combotree实现异步加载树形结构，并提供一个完整的示例。 #### 二、理解Combotree与异步树的概念 1. **Combotree简介**： - Combotree是jQuery EasyUI框架中的一个组合控件，它结合了Tree和Combobox的功能。 - 通常用于显示具有层次结构的数据集合，用户可以选择树中的某个节点作为输入值。 2. **异步树**： - 异步树是指在用户操作时动态加载数据到树中的方式。 - 在Combotree中实现异步树的关键在于设置节点的`state`属性为`closed`，这会让Combotree在展开节点时自动向服务器请求数据。 #### 三、具体实现步骤 ##### 3.1 JSP页面配置 - **定义Combotree控件**：首先需要在JSP页面中定义一个`<input>`元素，并为其指定`id`、`name`等属性。初始值可以设置为默认选中的节点ID。 ```html <input id="combotree1" name="combotree1" value="${actionform.combotree1_val}" style="width:200px;"> ``` - **初始化Combotree**：在`<head>`标签内通过JavaScript来初始化Combotree，并指定URL以及事件处理函数。 ```javascript $(function() { $('#combotree1').combotree({ url: '<html:rewrite action="/myAction.do?optype=getchildtree"/>', onLoadSuccess: function(node, data) { // 处理加载成功后的逻辑 }, onChange: function(n, o) { dochange(); } }); }); ``` ##### 3.2 后台服务端配置 - **Action类处理**：根据`optype`参数的不同，Action类需要处理两种情况。 - `optype=getchildtree`：获取子节点数据。 - `optype=gettext`：根据ID获取节点的文本值。 ```java public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { String optype = request.getParameter("optype"); if ("getchildtree".equals(optype)) { return getChildTree(request, response); } else if ("gettext".equals(optype)) { return getText(request, response); } return null; } ``` ##### 3.3 数据处理 - **子节点数据处理**：当`optype=getchildtree`时，需要从数据库或其他数据源获取子节点数据，并将其转换为JSON格式返回。 ```java private ActionForward getChildTree(HttpServletRequest request, HttpServletResponse response) { String id = request.getParameter("id"); List<Map<String, Object>> children = getChildrenFromDB(id); // 假设此方法获取子节点数据 // 将children转换为JSON并返回 return new ActionForward("/json", true); } ``` - **节点文本数据处理**：当`optype=gettext`时，根据ID查询节点的文本值并返回。 ```java private ActionForward getText(HttpServletRequest request, HttpServletResponse response) { String id = request.getParameter("id"); String text = getTextFromDB(id); // 假设此方法获取文本值 // 返回text return new ActionForward("/json", true); } ``` #### 四、关键点解析 1. **onLoadSuccess事件处理**： - 此事件用于处理加载数据成功后的逻辑，例如设置初始选中节点的文本值。 - 需要注意的是，如果节点的`state`属性设置为`closed`，则该节点会在被点击展开时自动加载子节点。 2. **onChange事件处理**： - 当用户选择不同的节点时触发此事件。 - 可以在此处执行额外的操作，比如更新其他控件的值或发送新的请求。 #### 五、总结通过上述步骤，我们可以实现在jQuery EasyUI Combotree中使用异步树功能。这种方式不仅可以提高用户体验，还能有效减少服务器的压力。希望本文提供的示例代码能够帮助开发者更好地理解和应用这一技术。

资源推荐

资源详情

资源评论

/*--================================================================================--
* SSH中使用jquery easyui中的ComboTree生成异步树的操作
* 原理是ComboTree本来就支持异步树的处理(通过设置节点的STATE:CLOSED属性，树就自动变成了异步树)，
* 而点击节点前的展开图标会触发子节点展开事件，ComboTree此时会自动往后台传送当前节点的ID值，
* 因此，后台ACTION通过pRequest.getParameter("id")获取父节点ID后，提供符合jason格式的字符串返回，
* [{id:GUANGDONG,TEXT:广东,STATE:CLOSED},{id:BEIJING,TEXT:北京}]
* 然后前台JSP中初始化ComboTree时候进行一些处理，就可以简单建立异步树下拉列表框了
--================================================================================--*/

//1）在JSP页面中创建ComboTree
//1.1 创建简单的<input>即可，可以设置value值为下拉框文本初始显示值TEXT对应的ID值，如actionform.combotree1_val = "GUANGDONG";
<input id="combotree1" name="combotree1" value="${actionform.combotree1_val}" style="width: 200px;">

//1.2 在<head>中初始化ComboTree
<head>
<script type="text/javascript">

$(function() {

//ComboTree控件初始化
$('#combotree1').combotree({
url: '<html:rewrite action="/myAction.do?optype=getchildtree"/>',
'onLoadSuccess': function(node,data){
//在panel控件load完成的时候处理当前显示值，如果不处理，则combotree1的显示值有可能会不正确
if(data.length>0){
var val = "${actionform.combotree1_val}"; //jsp页面初始化时combotree1的初始id值
var txt = $('#combotree1').combotree('getText'); //combotree1当前的显示text值

//当首次进入这个jsp页面，在combotree1还没有执行url获取jason树数据时，
//由于控件的处理机制，其内部的panel控件已经在进行初始化了，不过此时参数node=null,data=null