`
阅读更多

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/

1
1
分享到:
评论

相关推荐

    EASYUI TREEGRID异步加载数据实现方法

    在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...

    数据结构之easyui-treegrid

    标题"数据结构之easyui-treegrid"暗示我们将探讨如何使用EasyUI的TreeGrid组件来呈现和操作数据结构。在实际开发中,数据通常需要以某种结构(如数组、链表、树等)存储,以便在TreeGrid中展示。TreeGrid的数据结构...

    EasyUI的treegrid组件动态加载数据问题的解决办法

    通过以上步骤,我们可以实现EasyUI TreeGrid组件根据查询条件动态加载数据的功能。这种方式避免了对`treegrid('reload')`方法的直接依赖,同时也符合异步数据处理的最佳实践。在实际开发中,根据项目需求,你可能还...

    jQuery EasyUI版API

    4. **数据绑定**:EasyUI通过`datagrid`、`treegrid`等组件与后端进行数据交互,支持JSON、XML等多种数据格式,以及Ajax异步加载。 5. **事件处理**:每个组件都有丰富的事件,如点击、展开、关闭等,开发者可以...

    jquery-easyui-1.3.6.zip

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    jQuery EasyUI 1.4.5 版 API 中文版

    - **数据加载器(DataLoader)**:用于从服务器加载数据,支持JSON、XML等多种数据格式。 - **Ajax请求(Ajax)**:通过jQuery的$.ajax方法实现异步通信,处理服务器响应。 6. **增强的DOM操作**: - **选择器...

    jQuery EasyUI 1.4.5 版 API 中文版.rar

    同时,框架内部集成了Ajax功能,可以轻松地与后端服务器进行异步通信,实现动态加载和更新数据。 在实际开发中,熟悉并掌握jQuery EasyUI的API,可以帮助开发者提高工作效率,减少代码量,且由于其组件化的特点,...

    jQuery EasyUI 1.4.2 版 API 中文版

    API中讲解了如何设置下拉选项、异步加载数据及触发事件。 3. **TreeGrid**: 树形数据网格结合了树和表格的特点,可以展示层次化的数据。API中包含如何创建树节点、展开折叠、异步加载等内容。 4. **Dialog**: ...

    JQueryEasyui1.3.6+电子书文档+14套主题

    总结来说,《JQueryEasyui1.3.6+电子书文档+14套主题》是开发人员学习和使用jQuery EasyUI的重要资源,无论是初学者还是经验丰富的开发者,都能从中受益,快速构建出高效、美观的Web应用。通过深入学习和实践,你...

    jquery-easyui-1.5.5.5源码

    源码中会展示如何实现数据的异步加载和更新。 - **自定义扩展**:EasyUI允许开发者根据需求扩展或修改现有组件。通过阅读源码,我们可以学习如何进行这样的定制,以满足特定项目的需求。 总之,"jquery-easyui-1.5...

    easyUI-树形表格(TreeGrid)实现无限层级菜单

    在JavaScript中,我们需要初始化TreeGrid并配置相关参数,如加载数据的方式、列定义等: ```javascript $('#treegrid').treegrid({ onExpand: function(row, node) { var id = row.id; $.ajax({ url: '...

    jQuery EasyUI 1.3 API 中文教程

    带分页的树形数据表格 -TreeGrid 属性表格 - PropertyGrid 窗口应用 窗口 - Window 对话框 - Dialog 消息窗口 - Messager 表单相关 表单 - Form Demo 日历 - Calendar 下拉选择框 - Custom Combo ...

    详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)

    本文将详细介绍如何使用Jquery EasyUI的tree组件实现异步加载,即将遍历指定的文件夹,并根据文件夹内的文件和子文件夹动态生成tree结构。 在讲解Jquery EasyUI tree的异步加载之前,需要理解tree组件的基本概念。...

    jquery easyui 帮助文档

    例如,使用`datagrid`的`loadMethod`属性来指定数据加载的URL,或者使用`bindMethod`进行异步操作。 4. **事件处理**:EasyUI控件提供了丰富的事件接口,如点击(onClick)、加载完成(onLoadSuccess)等,允许...

    jquery.easyui前台框架

    同时,官方文档、社区论坛和各种示例代码都是学习的好资源,可以深入研究其高级特性和使用技巧,如异步数据加载、自定义事件、插件扩展等。 综上所述,jQuery EasyUI是一个强大的前端框架,它简化了前端开发工作,...

    easyui资料

    这里面包含easyui的chm文档easyui-1.3.5.zip,datagrid项目案例,SSH和easyui整合的案例,easyui异步加载tree,tree和datagrid共用的例子,改好的兼容jQueryUI1.10.3的easyui,另外加一个primeui-10资料。资源分定为1分...

    jQuery EasyUI 1.5 版 API 中文版

    7. **AJAX集成**:jQuery EasyUI 支持异步数据加载和提交,使得与服务器端的数据交换更加平滑。 8. **事件处理**:通过绑定各种事件(如点击、加载、关闭等)来实现动态交互,增强了用户体验。 9. **主题支持**:...

    easyui 异步树

    - `url`: 指定异步加载数据的服务器接口地址。 - `onLoadSuccess`: 数据加载成功后的回调函数,可以在此进行进一步处理。 - `onBeforeLoad`: 在加载数据前触发的事件,可以进行预处理或判断是否需要加载。 - `...

Global site tag (gtag.js) - Google Analytics