jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 异步请求
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
2015年12月22日 11:46:02 星期二
http://fanshuyao.iteye.com/
<table id="select" class="easyui-treegrid" style="width:100%;min-height:550px;height: 95%;" data-options=" iconCls: 'icon-ok', animate: false, collapsible: false, fitColumns: true, singleSelect: true, url: '${pageContext.request.contextPath}/backend/getOrgs.do?enableFlag=Y', method: 'post', idField: 'orgId', treeField: 'orgName', onBeforeExpand: function(row){ appendTree(row); }, onClickRow: function(row){ getUsers(); } "> <thead> <tr> <th field="orgName" width="150">组织名称</th> <!-- <th field="orgShotName" width="100">组织简称</th> --> </tr> </thead> </table>
function appendTree(row){ $.getJSON(basePath+'/backend/getOrgs.do?time='+decodeURI(''+new Date()), { enableFlag: 'Y', parentOrgId: row.orgId }, function(json){ if(json.rows[0]){ var childrenNodes = $('#select').treegrid('getChildren',row.id); for(var i=0; i<childrenNodes.length; i++){ var childrenNode = childrenNodes[i]; if($('#select').treegrid('find',childrenNode.id) != null){ $('#select').treegrid('remove',childrenNode.id);//移除 } } $('#select').treegrid('append',{ parent: row.orgId, data: json.rows }); } }); };
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
2015年12月22日 11:46:02 星期二
http://fanshuyao.iteye.com/
相关推荐
在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...
标题"数据结构之easyui-treegrid"暗示我们将探讨如何使用EasyUI的TreeGrid组件来呈现和操作数据结构。在实际开发中,数据通常需要以某种结构(如数组、链表、树等)存储,以便在TreeGrid中展示。TreeGrid的数据结构...
通过以上步骤,我们可以实现EasyUI TreeGrid组件根据查询条件动态加载数据的功能。这种方式避免了对`treegrid('reload')`方法的直接依赖,同时也符合异步数据处理的最佳实践。在实际开发中,根据项目需求,你可能还...
4. **数据绑定**:EasyUI通过`datagrid`、`treegrid`等组件与后端进行数据交互,支持JSON、XML等多种数据格式,以及Ajax异步加载。 5. **事件处理**:每个组件都有丰富的事件,如点击、展开、关闭等,开发者可以...
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
- **数据加载器(DataLoader)**:用于从服务器加载数据,支持JSON、XML等多种数据格式。 - **Ajax请求(Ajax)**:通过jQuery的$.ajax方法实现异步通信,处理服务器响应。 6. **增强的DOM操作**: - **选择器...
同时,框架内部集成了Ajax功能,可以轻松地与后端服务器进行异步通信,实现动态加载和更新数据。 在实际开发中,熟悉并掌握jQuery EasyUI的API,可以帮助开发者提高工作效率,减少代码量,且由于其组件化的特点,...
API中讲解了如何设置下拉选项、异步加载数据及触发事件。 3. **TreeGrid**: 树形数据网格结合了树和表格的特点,可以展示层次化的数据。API中包含如何创建树节点、展开折叠、异步加载等内容。 4. **Dialog**: ...
总结来说,《JQueryEasyui1.3.6+电子书文档+14套主题》是开发人员学习和使用jQuery EasyUI的重要资源,无论是初学者还是经验丰富的开发者,都能从中受益,快速构建出高效、美观的Web应用。通过深入学习和实践,你...
源码中会展示如何实现数据的异步加载和更新。 - **自定义扩展**:EasyUI允许开发者根据需求扩展或修改现有组件。通过阅读源码,我们可以学习如何进行这样的定制,以满足特定项目的需求。 总之,"jquery-easyui-1.5...
在JavaScript中,我们需要初始化TreeGrid并配置相关参数,如加载数据的方式、列定义等: ```javascript $('#treegrid').treegrid({ onExpand: function(row, node) { var id = row.id; $.ajax({ url: '...
带分页的树形数据表格 -TreeGrid 属性表格 - PropertyGrid 窗口应用 窗口 - Window 对话框 - Dialog 消息窗口 - Messager 表单相关 表单 - Form Demo 日历 - Calendar 下拉选择框 - Custom Combo ...
本文将详细介绍如何使用Jquery EasyUI的tree组件实现异步加载,即将遍历指定的文件夹,并根据文件夹内的文件和子文件夹动态生成tree结构。 在讲解Jquery EasyUI tree的异步加载之前,需要理解tree组件的基本概念。...
例如,使用`datagrid`的`loadMethod`属性来指定数据加载的URL,或者使用`bindMethod`进行异步操作。 4. **事件处理**:EasyUI控件提供了丰富的事件接口,如点击(onClick)、加载完成(onLoadSuccess)等,允许...
同时,官方文档、社区论坛和各种示例代码都是学习的好资源,可以深入研究其高级特性和使用技巧,如异步数据加载、自定义事件、插件扩展等。 综上所述,jQuery EasyUI是一个强大的前端框架,它简化了前端开发工作,...
这里面包含easyui的chm文档easyui-1.3.5.zip,datagrid项目案例,SSH和easyui整合的案例,easyui异步加载tree,tree和datagrid共用的例子,改好的兼容jQueryUI1.10.3的easyui,另外加一个primeui-10资料。资源分定为1分...
7. **AJAX集成**:jQuery EasyUI 支持异步数据加载和提交,使得与服务器端的数据交换更加平滑。 8. **事件处理**:通过绑定各种事件(如点击、加载、关闭等)来实现动态交互,增强了用户体验。 9. **主题支持**:...
- `url`: 指定异步加载数据的服务器接口地址。 - `onLoadSuccess`: 数据加载成功后的回调函数,可以在此进行进一步处理。 - `onBeforeLoad`: 在加载数据前触发的事件,可以进行预处理或判断是否需要加载。 - `...