`

Extjs tree 异步加载 实例

Extjs tree异步加载结点 
阅读更多
一:jsp 页面

<%@ page contentType="text/html; charset=UTF-8" language="java"
import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="com.luguang.model.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <base href="<%=basePath%>">
<title>组织树</title>
        <link rel="stylesheet"   href="<%=basePath%>scripts/extjs/resources/css/ext-all.css" type="text/css"/>
        <script type="text/javascript" src="<%=basePath%>scripts/extjs/ext-all.js"></script>
<script LANGUAGE="JavaScript">
  Ext.require(['*']);
Ext.onReady(function(){
//分级异步加载节点实例
//定义数据模型
Ext.regModel("orgInfo0",{
fields:['orgId','text']
});
var myOrgStore=new Ext.data.TreeStore({
model:'orgInfo0',
nodeParam:'orgId',//指定节点参数名
proxy:{
type:'ajax',
url:'<%=basePath%>/org/showOrgTreeExtJsTree',
reader:'json'
},
autoLoad:true,
root:{
text:'${sessionScope.parOrgName}',
id:'org_${sessionScope.parOrgId}'
}
});
function tree_itemclick0(node,event){
var nodeId=event.data.id;
var nodeText=event.data.text;

if(nodeId.indexOf("org")>=0){
nodeId=nodeId.substring(4,nodeId.length);
$("#orgName0").val(nodeText);
$("#orgId0").val(nodeId);
}
}

var orgPointTree=Ext.create('Ext.tree.Panel',{
renderTo:'pointOrgTree',
dataIndex:'text',
sortable:true,
store:myOrgStore,
rootVisible:true,
listeners:{
itemclick:tree_itemclick0,
  afterrender:function(orgPointTree){
     setTimeout(function(){var rootNode=orgPointTree.getRootNode(); rootNode.expand(); },10);
   }
}
});
});
    </script>
</head>
<body style="border-bottom-width:thin">
<div id="pointOrgTree"></div>
</body>
</html>

后台：org/showOrgTreeExtJsTree方法：

String result="";
String orgId=request.getParameter("orgId");
String[] oIds=orgId.split("_");
String rId=request.getSession().getAttribute("rId0").toString();
if(rId!=null && !rId.equals("")){
if(oIds.length==2){
if(oIds[0].equals("org")){
int oid=Integer.parseInt(oIds[1].toString());
//子组织
String sql="select org.ORG_NAME ,org.ORG_ID  from lgvmp_org org,lgvmp_role_org_relation roleOrg where org.PARENT_ID="+oid+" and org.ORG_ID=roleOrg.ORG_ID and roleOrg.ROLE_ID="+rId+" order by org.ORDER_BY";
Session sess= this.getEntityDao().getHibernateTemplate().getSessionFactory().openSession();
ArrayList<Object[]> orgArr=(ArrayList<Object[]>) sess.createSQLQuery(sql).list();
sess.close();
result="[";
for(Object[] obArr:orgArr){
result=result+"{text:'"+obArr[0].toString()+"',id:'org_"+Integer.parseInt(obArr[1].toString())+"'},";
}
if(result.endsWith(",")){
result=result.substring(0,result.length()-1);
}
result+="]";
}
}

}


response.getWriter().write(result);
分享到：
| mybatis in action
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJs Tree

    - **异步加载**：通过`Ext.tree.TreeLoader`实现数据的异步加载，其中`dataUrl`指定了获取数据的URL路径。 - **根节点配置**：通过`root`属性指定树的根节点，该节点可配置自己的`text`、`iconCls`和`id`等属性。 #...

    Ext.ux.tree.treegrid异步加载

    本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能，包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验，同时减轻服务器的压力。在实际开发过程中，还需要根据具体...

    带复选框的 ExtJs tree

    2. **TreePanel配置**：创建TreePanel实例时，指定了其所在元素、ID、自动滚动、动画效果、边框、拖放功能等属性，并定义了TreeLoader用于异步加载数据，数据源URL包含了动态参数`roleId`，这通常用于根据角色ID加载...

    extjs ajax tree（js动态树,无需递归）

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构，它利用AJAX技术来异步加载节点数据，无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度，尤其是在处理大量数据时。ExtJS是一个功能丰富的...

    Extjs tree的简单小例子

    在本文中，我们将深入探讨EXTJS中的树形组件（TreePanel），以及如何创建一个简单的异步加载和拖放功能的示例。EXTJS TreePanel 是一个强大的组件，用于展示层次结构数据，通常用于组织目录、文件系统或组织结构等。...

    Extjs 动态加载树

    动态加载树（Dynamic Loading Tree）是指在用户滚动或展开树节点时，仅加载当前需要显示的数据，而非一次性加载所有数据，这有助于提高页面性能和用户体验。 在描述中提到的博客链接可能提供了一个实现动态加载树的...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    - 在ExtJS中，树形节点可以通过配置项`children`来定义子节点，或者通过异步加载数据来实现更高效的显示。 2. **ExtJS Grid** - 表格控件（Grid）是ExtJS的核心组件之一，用于展示二维表格数据。它提供了排序、...

    extJs 2异步树 源程序.

    在这款框架中，异步树（Asynchronous Tree）是一种重要的组件，它允许开发者动态加载树形结构的数据，提高网页性能，尤其是在处理大量数据时。异步树通常与JSON（JavaScript Object Notation）数据格式结合使用，以...

    ExtJs_TreeDemo

    树形菜单（Tree）是ExtJs中的一个重要组件，它允许用户以层级结构展示数据，广泛应用于文件系统、组织结构或者导航菜单等场景。"ExtJs_TreeDemo"是一个示例，展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中，...

    extjs 写的动态加载、增删改查、拖拽Tree（完整版）

    总之，ExtJS 动态加载、增删改查和拖拽Tree的实现，结合MySQL数据库的操作，能够帮助你构建出功能强大且高效的前端数据管理界面。掌握这些技术，不仅可以提升开发效率，还能为用户提供流畅的操作体验。

    ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点

    在本文中，我们将深入探讨如何使用ExtJS框架的Tree组件，结合JSON数据格式以及Struts 2框架，来实现Ajax动态加载树形结构的节点。这是一项常见的需求，特别是在构建可扩展、用户友好的Web应用时，动态加载的树结构...

    EXTJS 树的实例

    树（Tree）是EXTJS中一个重要的组件，它允许以层级结构展示数据，常用于目录、组织架构或者文件系统的展示。在这个“EXTJS 树的实例”中，我们将深入探讨EXTJS树的基本制作过程。 1. **EXTJS Tree的基本概念** ...

    EXT tree 使用 实例 最新

    在文档`extjs的tree的使用.doc`中，你将找到关于如何设置这些配置、创建树实例、加载数据、响应用户交互的具体示例代码和解释。通过学习和实践这些实例，你可以更好地掌握EXT Tree的用法，并根据项目需求灵活应用。

    ExtJs 3.1的一些实例源码.zip

    这个压缩包文件"ExtJs 3.1的一些实例源码.zip"很可能包含了一系列使用ExtJs 3.1编写的示例代码，这些示例可以用于学习和理解如何在实际项目中应用该框架。 首先，让我们来深入了解一下ExtJs 3.1的主要特性： 1. **...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    总之，`Ext.ux.tree.PagingTreeLoader`是ExtJs 3.x框架中一个非常实用的组件，它提高了大量数据树的加载效率，使得用户可以流畅地浏览和操作树结构。通过合理的配置和服务器端接口配合，可以构建出高效、用户体验...

    EXTJS源码分析与开发实例宝典-开发的效果图.rar

    在开发实例部分，可能会涵盖EXTJS的各种组件如窗口（Window）、面板（Panel）、表单（Form）、表格（Grid）、树形控件（Tree）的使用方法，以及如何创建动态数据绑定、实现数据分页、使用Ajax进行异步通信等。...

    ssh框架+extjs4.0grid实例

    在这个实例中，Grid组件被用来展示数据，它能动态加载数据，支持排序、分页和过滤等功能。ExtJS 4.0与后台的Struts2协作，通过Ajax请求获取服务器端的数据，实现前后端的异步交互。 项目中可能包含以下文件结构： -...

    extjs4 入门基础，form、grid、tree

    树节点可以通过`children`属性定义子节点，或者通过异步加载数据。树视图还支持节点的展开/折叠、选择、拖放操作。 **四、ExtJS 4.21 版本特性** ExtJS 4.21版本引入了一些改进和新特性，包括性能优化、兼容性提升...

    extjs实现动态树

    在ExtJS中，这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`：这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件，支持...

    asp extjs开发信息管理系统实例

    EXTJS则会通过Ajax技术与ASP服务器进行异步通信，获取或提交数据，更新页面内容。EXTJS的组件如Grid Panel可以用于显示表格数据，Form Panel用于数据录入，Window和Dialog用于弹出式操作，Tree Panel可以用于展现...

Magicbox
Global site tag (gtag.js) - Google Analytics