jQuery EasyUI Combotree 异步树生成与使用示例

需积分: 9 30 浏览量更新于2024-09-18 收藏 7KB TXT 举报

"该资源主要展示了如何在jQuery EasyUI中使用combotree组件来创建异步树结构。combotree是一种结合了下拉列表和树形结构的控件，适用于需要展示层级数据的场景。通过设置`state: closed`属性，可以实现异步加载子节点，提高页面性能。示例代码提供了从后台获取JSON数据并动态填充combotree的完整流程，包括JSP页面的HTML结构、JavaScript配置以及与后台交互的部分。" 在jQuery EasyUI中，combotree是一个非常实用的组件，它将传统的下拉选择框与树形结构结合在一起，使得用户可以在有限的空间内查看和选择具有层级关系的数据。异步加载功能则允许在需要时才请求和显示子节点，减少了初次加载时的数据量，提高了用户体验。在给定的代码示例中，首先在JSP页面中创建了一个`<input>`元素，用于显示combotree，并设置了初始值。接着，在`<head>`部分的JavaScript代码中，使用`combotree`方法初始化这个输入框，指定了URL，即后台服务的地址，用于异步获取子节点数据。`onLoadSuccess`函数在数据加载成功后被调用，用于处理加载后的数据。在这个例子中，如果加载的数据显示有子节点，代码会检查并设置combotree的选中值和文本，确保与页面初始化时的值一致。异步树的关键在于后台返回的数据格式。JSON数据应该是一个数组，每个元素包含`id`（节点ID）、`text`（节点文本）和`state`（节点状态）。设置`state: 'closed'`表示这个节点默认是折叠的，当用户展开时才会触发异步请求加载其子节点。例如： ```json [ {id: 'GUANGDONG', text: '广东', state: 'closed'}, {id: 'BEIJING', text: '北京'} ] ``` 在与后台交互的过程中，前端通过指定的URL向服务器发送请求，服务器根据请求参数（如"id"）返回相应的JSON数据，前端接收到数据后，利用`combotree`的API进行解析和渲染。总结来说，该资源提供了一个完整的jQuery EasyUI combotree异步树的创建实例，包括前端的配置和后台数据格式要求，对于理解和应用combotree组件来说是非常有价值的参考。开发者可以根据自己的实际需求，调整URL、处理函数以及后台返回的数据，实现自定义的异步树结构。

/*--================================================================================--
* 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

jQuery EasyUI Combotree 异步树生成与使用示例

jquery-easyui_combotree异步树的生成代码

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

jQuery_EasyUI_API.rar_jquery-easyui api

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

jQuery EasyUI: 异步Combotree生成与操作示例

jquery-easyui

jquery_easyui_整理

jquery-easyui-1.2.3

jquery-easyui-1.5.3

jquery-easyui-1.3.0

最新资源