Java SSH与jQuery EasyUI：异步树ComboTree实现详解

4星 · 超过85%的资源需积分: 21 43 浏览量更新于2024-09-16 1 收藏 7KB TXT 举报

本示例主要讲解如何在Java环境中使用jQuery EasyUI的Combotree组件创建异步树结构。这个例子提供了一个完整的JSP实现，包括修正了之前版本的错误，并且强调了如何处理后台返回的JSON数据来实现异步加载效果。在jQuery EasyUI中，Combotree是一个将输入框与树形控件结合的组件，用于选择树状结构中的数据项。异步树意味着树形结构的数据是从服务器动态获取的，而不是一次性加载所有节点。这有助于提高页面性能，特别是在处理大量数据时。关键知识点： 1. 初始化Combotree：在JSP页面中，首先需要创建一个`<input>`元素，为其指定ID（如"combotree1"），并可以预设初始值。初始值可以通过`value`属性设置，例如：`value="${actionform.combotree1_val}"`。 2. JavaScript配置：使用jQuery选择器`$('#combotree1')`获取该元素，然后调用`.combotree()`方法进行初始化。传入的参数`url`定义了异步加载数据的地址，如：`url:'<html:rewrite action="/myAction.do?optype=getchildtree"/>'`。这意味着当用户展开树节点时，会向指定的URL发送请求获取子节点数据。 3. 处理后台返回数据：后台应返回一个JSON数组，其中每个对象包含`id`、`text`以及用于控制展开状态的`state`属性。例如：`[{id:GUANGDONG, TEXT: '广东', STATE: 'CLOSED'}, {id: BEIJING, TEXT: '北京'}]`。这里的`STATE: 'CLOSED'`表示节点默认是关闭的，需要用户手动展开。 4. 加载成功后的处理： `onLoadSuccess`回调函数会在树加载成功后执行，可以在这个函数中进行一些自定义操作。例如，检查是否需要选中某个特定的节点：`if(data.length > 0) {...}`。这里通过`val="${actionform.combotree1_val}"`获取JSP页面上的初始值，`txt=$('#combotree1').combotree('getText')`获取当前选中的文本，然后根据需要进行设置。 5. 显示选中值：如果在页面加载时已知某个节点应被选中，可以通过`combotree('select', id)`方法来选择它。例如，如果`val`与某个节点的`id`匹配，那么这个节点就会被选中并显示在输入框中。总结，这个示例提供了一个完整的流程，从JSP页面的HTML结构，到JavaScript的初始化和事件处理，再到后台数据的格式要求，全面展示了如何在Java环境下使用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

剩余6页未读，继续阅读

spoky

粉丝: 5
资源: 4

Java SSH与jQuery EasyUI：异步树ComboTree实现详解

easyui-combobox、combotree后台数据数据组装与前台绑定实例

easyui combotree加载静态数据问题（选不上）解决方法

ComboTree的小例子，测试通过

jquery-easyui-1.2.5.zip

jquery-easyui-1.7.0

jquery easyui 案例 下载

easyui-combotree

VM223 jquery.easyui.min.js:332 Uncaught ReferenceError: jQuery is not defined at VM223 jquery.easyui.min.js:332:4

easyui datagrid分页查询

最新资源

jquery easyui 案例下载