jQuery EasyUI Combotree 异步树创建与加载示例

3星 · 超过75%的资源需积分: 21 56 浏览量更新于2024-09-11 收藏 7KB TXT 举报

本篇文章主要介绍了如何在jQuery EasyUI框架中实现异步树（combotree）的生成和使用。首先，我们理解一下关键概念：jQuery EasyUI是一个基于jQuery的UI库，提供了丰富的Web界面组件，其中combotree组件用于构建可选项的下拉列表，通常用于动态加载数据以填充树状结构。标题中的"jquery-easyui_combotree异步树的生成代码示例"表明文章内容将深入讲解如何通过EasyUI的combotree组件，结合服务器端的数据处理，实现树形数据的异步加载。在前端，开发者需要配置`url`属性来指定数据获取的后端接口，如这段代码中的`/<html:rewriteaction="/myAction.do?optype=getchildtree"/>'，这个URL指向一个名为`/myAction.do`的HTTP请求，传递参数`optype=getchildtree`来触发数据的获取。代码中的`onLoadSuccess`回调函数是关键部分，当树节点数据成功加载时，它会接收到`node`（当前选中的节点）和`data`（返回的JSON数据）作为参数。开发者可以在这里根据数据格式进行解析，比如这段代码中的`if(data.length>0)`判断数据是否已加载且非空，然后设置`combotree1`的值（可能初始化时的默认值）和文本显示。在JSP页面中，作者使用了两个示例：首先，通过`<input>`元素设置初始的`value`属性，表示选择的树节点的ID，例如`value="${actionform.combotree1_val}"`。其次，在`<head>`部分，使用jQuery的`combotree`方法初始化组件，设置了加载成功后的处理逻辑。为了确保异步加载时的用户体验，当树节点加载完成时，会检查`combotree1`的值是否已经改变，如果已更改，则更新显示的文本（`vartxt=$('#combotree1').combotree('getText')`），这有助于保持与用户交互的实时性。总结来说，本文将详细展示了如何利用jQuery EasyUI的combotree组件构建异步树，包括设置URL、配置回调函数以及在JSP页面中嵌入和初始化组件的过程。开发者可以根据实际项目需求，灵活调整代码，以满足动态数据加载和树形结构的选择需求。

/*--================================================================================--
* 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页未读，继续阅读

C石头

粉丝: 11
资源: 11

jQuery EasyUI Combotree 异步树创建与加载示例

jquery-easyui_combotree异步树的生成代码

Java>jquery-easyui_combotree异步树的生成代码示例(NEW)

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分页查询

easyui学习记录：combotree的使用

最新资源

jquery easyui 案例下载