使用ExtJS2构造动态异步加载的树

最新推荐文章于 2015-02-04 14:40:30 发布
最新推荐文章于 2015-02-04 14:40:30 发布
阅读量103 收藏
点赞数
分类专栏： EXT 文章标签： EXT json JSP JavaScript CSS ViewUI

标题：使用ExtJS2构造动态异步加载的树

作者：JRQ

 

链接：http://blog.csdn.net/jrq/archive/2008/06/15/2549839.aspx

 

正文：

 

使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。

 

 

1. 下载ExtJS2，地址：http://www.extjs.com/

 

   下载Ext JS 2.1 SDK：ext-2.1.zip。

 

   examples文件夹下全部是ExtJS例子演示程序。

 

   ExtJS2主要的会用到以下几个文件：ext-all.css、ext-base.js、ext-all.js，使用方法可以参考Demo。

 

   Ext文档中心：

 

      http://www.ajaxjs.com/docs/docs/

 

      http://www.jackytsu.com/extcn/docs/

 

 

 

2. 下载JSON-lib，地址：http://json-lib.sourceforge.net/

 

   打开网址后，首页上有一段话：

 

      Json-lib requires (at least) the following dependencies in your classpath:

 

      jakarta commons-lang 2.3

      jakarta commons-beanutils 1.7.0

      jakarta commons-collections 3.2

      jakarta commons-logging 1.1.1

      ezmorph 1.0.4

 

   需要下载上述jar文件，配合JSON-lib 一起使用。

  

   commons 下载地址：http://commons.apache.org/

 

   ezmorph 下载地址：http://ezmorph.sourceforge.net

 

   或者，到 http://www.docjar.com 搜索下载。

 

   JSON的用法，可参考相关文档。

 

 

 

3. 使用ExtJS写的mytree.js文件。

 

   关于Ext.tree.TreePanel，可以参考：

 

   http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html

 

 

   mytree.js代码如下：

 

--------------------------------------

 

 Ext.onReady(function(){

 

   var Tree = Ext.tree;

 

   //定义根节点的Loader

   var treeloader=new Tree.TreeLoader({dataUrl:'tree.jsp?DID=1'}); 

 

   //异步加载根节点

   var rootnode=new Tree.AsyncTreeNode({

        id:'1',

        text:'目录树根节点'

                });

    

   var treepanel = new Tree.TreePanel({

                //renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。

                el:'tree_div',        //填充区域

                rootVisible:true,     //隐藏根节点

                border:true,          //边框

                animate:true,         //动画效果

                autoScroll:true,      //自动滚动

                enableDD:false,       //拖拽节点             

                containerScroll:true,

                loader:treeloader            

            });

 

   //设置根节点

   treepanel.setRootNode(rootnode);

 

   //响应事件，传递node参数

   treepanel.on('beforeload',

                function(node){

                   treepanel.loader.dataUrl='tree.jsp?DID='+node.id;    //定义子节点的Loader   

                });

 

   treepanel.render();           

   rootnode.expand(false,false);

});

 

--------------------------------------

 

 

4. 展示树的extjsTree.jsp的文件。该jsp文件调用mytree.js，展示树。

 

   注意使用到了ext-all.css、ext-base.js、ext-all.js这三个文件。

 

   extjsTree.jsp代码如下：

 

--------------------------------------

 

<html>

<head>

<title>ExtJS Tree</title>

<link rel="stylesheet" type="text/css" href="../extjs/ext-all.css" />

<script type="text/javascript" src="../extjs/ext-base.js"></script>

<script type="text/javascript" src="../extjs/ext-all.js"></script>

 

<script type="text/javascript" src="../extjs/mytree.js" defer=true charset="GBK"></script>

</head>

 

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" onContextMenu="return false;">

 <tr>

   <td align=left valign="top" >

      <!--树的填充区域-->

      <div id="tree_div" style="height:101%;width:100%"></div>

   </td>

 </tr>

</table>

</body>

</html>

 

--------------------------------------

 

 

 

5. 构造树节点。

 

 

   定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。

 

   JSONTreeNode.java代码如下：

 

-------------------------------------- 

 

package com.tree;

 

import java.io.Serializable;

 

public class JSONTreeNode implements Serializable{

 

    private static final long serialVersionUID = 1L;

 

    public static void main(String[] args) {

   

    }

   

     private String id;            //ID

     private String text;          //节点显示

     private String cls;           //图标

     private boolean leaf;         //是否叶子

     private String href;          //链接

     private String hrefTarget;    //链接指向

     private boolean expandable;   //是否展开

     private String description;   //描述信息

     

         //get、set方法。略。

 

    }

}

 

-------------------------------------- 

 

 

 

6. 从数据库查询，读取字节点数据及构造JSON数据。

 

 

   JSONTree.java代码如下：

 

-------------------------------------- 

package com.tree;

 

import java.sql.Connection;

import java.sql.Statement;

import java.sql.ResultSet;

import java.util.ArrayList;

import net.sf.json.JSONArray;

import com.db.DBConnction;

import com.tree.JSONTreeNode;

 

public class JSONTree{

    private String PID;

   

    public String getJSONString(){     

        Connection conn =null;

        Statement st = null;

        ResultSet rs = null;

        ArrayList<JSONTreeNode> TreeNodeArray = null;

       

        String SQLString = "SELECT * FROM S_MLS WHERE PID="+this.PID+" ORDER BY DID";   

           

        try

        {

            conn = DBConnction.getConnection();

            st = conn.createStatement();

               

            rs = st.executeQuery("SELECT PID FROM S_MLS WHERE PID>0 Group By PID Order By PID");           

           

            StringBuffer parentIDBuffer =new StringBuffer();

            parentIDBuffer.append("|");        

            while(rs.next())

            {

                parentIDBuffer.append(rs.getString("PID"));

                parentIDBuffer.append("|");

            }

            //得到所有的parentDID列表（这是一个巧妙的算法^_^）

            String parentIDString = parentIDBuffer.toString();        

           

            rs = st.executeQuery(SQLString);   

            TreeNodeArray = new ArrayList<JSONTreeNode>(); 

           

            while(rs.next())

            {

                JSONTreeNode TreeNode = new JSONTreeNode();

                TreeNode.setId(rs.getString("DID"));

                TreeNode.setText(rs.getString("JDMC"));

                TreeNode.setDescription(rs.getString("JDMC"));         

                    TreeNode.setHref("rightframe.jsp?did="+rs.getString("DID").toString());

                    TreeNode.setHrefTarget("rightFrame");              

               

                if (parentIDString.indexOf("|"+rs.getString("DID")+"|")>=0) //父节点

                    {

                        TreeNode.setCls("folder");

                        TreeNode.setLeaf(false);

                        TreeNode.setExpandable(false);

                    }

                    else //子节点

                   {

                        TreeNode.setCls("file");

                        TreeNode.setLeaf(true);

                        TreeNode.setExpandable(false);

                    }

                    TreeNodeArray.add(TreeNode);

            }

           

            JSONArray JsonArray = JSONArray.fromObject(TreeNodeArray); //得到JSON数组    

 

            return JsonArray.toString();//返回JSON数据

        }

        catch(Exception e)

        {

            System.out.println("getJSONString() of JSONTree.java throws : "+e.toString());

            return "";

        }

        finally

        {

            DBConnction.closeConnection(conn,st,rs);

        }

    }  

 

 

    public String getPID() {

        return PID;

    }

 

    public void setPID(String pid) {

        PID = pid;

    }

}

 

-------------------------------------- 

 

 

7. mytree.js中ExtJS的TreeLoader调用的tree.jsp。

 

   在目录树上点击TreeNode后会加载下一级节点。 

 

   tree.jsp负责TreeNode点击后，传回由下一级节点构造的JSON数据。

 

   tree.jsp代码如下：

 

-------------------------------------- 

 

<%@ page language="java" pageEncoding="GBK"%>

 

<jsp:useBean class="com.thams.tree.JSONTree" id="JSONTree"></jsp:useBean>

 

<% 

 String PID = "";

 

 if (request.getParameter("DID")!=null)

 {

    PID = request.getParameter("DID").toString();

 }

 

 JSONTree.setPID(PID);

%>

 

<%=JSONTree.getJSONString()%>

 

-------------------------------------- 

 

 

7. 江湖故事

 

 

   1). 如果要做ExtJS Tree的DEMO，生成TreeLoader()时，尽量不要使用静态的JSON格式文件。

      

       如：

           Tree.TreeLoader({dataUrl:'/jsondata.txt'});

 

           Tree.TreeLoader({dataUrl:'/jsondata.js'});  

 

       等诸如此类。

 

 

       在网上查资料时，做ExtJS Tree时，很多资料说使用静态的JSON文件做Demo，我使用ExtJS2.1，一次没有成功。

 

       为此浪费了很多时间精力，付出惨重代价。

 

 

   2). 使用JSON的时候，需要一些jar文件来配合使用。

 

       从网上下载的时候，很多是zip文件，当时没有多加考虑，按照以往的经验，直接修改后缀名为jar，然后导入到lib文件夹，结果会报错。

 

       诸如：

 

       javax.servlet.ServletException: org/apache/commons/lang/exception/NestableRuntimeException

 

       java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntimeException

 

 

       查了很多资料，没有搞定。

 

       开始以为是jar版本不匹配造成的。在这个问题上折腾了很久，亦浪费很多时间和精力，痛苦啊。

 

       精神的折磨。

 

       其实，真正的jar文件需要解压zip文件后才能得到的。低级错误。崩溃。

 

 

   3). 关于s.gif文件的问题

      

       该问题会在系统不连互联网的情况下暴露。

      

       因为ExtJS在生成Tree时，默认情况下，总是访问http://extjs.com/s.gif下载这个s.gif图片文件。

 

       在不连网的情况下，树节点的导航图片显示不出，通过右键属性可知，是http://extjs.com/s.gif。

 

       通过搜索，发现该s.gif是在ext-base.js这个文件中定义的：

    

       BLANK_IMAGE_URL:"http:/"+"/extjs.com/s.gif"

 

       并且ExtJS中的示例程序是带有这个s.gif图片文件的。      

 

       根据具体应用情况，把ext-base.js修改成为：

 

       BLANK_IMAGE_URL:"../images/default/s.gif"

 

 

   4). 调试的时候，JS报错：未结束的字符串常量。

 

      这个问题是因为JS调用时没有指定字符集，造成JS里的汉字出现乱码引起的。

 

      调用JS时，可以指定使用字符集。

 

      如：<script type="text/javascript" defer=true src="xxx.js" charset="GBK">

 

 

8. AJAX

 

   AJAX：Asynchronous JavaScript and XML（异步JavaScript和XML）

     

   只是为了树，也要学ExtJS。

 

   ExtJS2.1＋JSON ＝ 动态异步加载的树

 

 

 

[--完--]

 

 

                                                                      By JRQ 

 

                                                                    2008/06/15 于京

=========================================================

=========================================================

=========================================================

【转载注】

   配置须知：

  1、数据库对应的表中必须添加一个虚根！该虚根是一级节点的父节点。

  2、最好把Ext的相关文件都放到项目中——不仅仅是文章1中说的ext-all.css、ext-base.js、ext-all.js这三个文件。

  3、如果使用的JDK是1.5之前的版本，那么必须下载一个json-lib-2.2.2-jdk13.jar。

  4、必须注意文章2中说的jar包的版本！

穿过午夜
关注
专栏目录
extjs异步树－每个节点都异步加载－前后台代码都有－附整个工程
03-24
在家研究了一下extjs异步树，－每个节点都异步加载－前后台代码都有－附整个工程－运行通过－前台代码请看doctree.js，后台代码请看TreeService.java,运行环境：Myeclipse6.5+tomcat7.0.27
ExtJS构造动态异步加载
12-07
本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构，结合AJAX技术实现JSON数据的高效传输。 首先，我们要理解什么是动态异步加载。在传统的网页开发中，如果一次性加载所有数据，可能会导致页面加载速度慢，...
Ext Js简单Tree创建及其异步加载
weixin_34129145的博客
02-04 92
对于Ext Js的树的使用也是比较多的，本篇分享简单的Tree的创建及其树的异步加载处理。 1.简单TreePanel的创建 function creatTree() {//创建简单的树 //节点集合创建 var rootNode = new Ext.tree.TreeNode({ id: 'root', text: '根节点', expanded: true }); ...
『ExtJS』树 异步加载数据
weixin_30648587的博客
02-14 94
几点说明 这只是个最简单的版本 更复杂的暂时没想到要复杂到什么程度…… 其中涉及到了 使用 Ext.Ajax.request 对树进行动态加载 在 树 的配置中加入 listeners 事件侦听，从而实现「单击节点 –> 触发事件」的功能 这里使用的是 ExtJS 4.0.7 版本，在...
ExtJS 创建动态加载树
weixin_30258901的博客
11-12 124
Ext 中导航树的创建有两种方式：1、首先将所有的数据读出来，然后绑定到前台页面。2、每点击一个节点展开后加载子节点。在数据量比较小的时候使用第一种方式加载的会快一些，然而当数据量比较大的时候，我还是建议使用第二种方式的。这里我就来介绍一下第二种树的展示方式。 源码奉上： 1 //创建model 2 Ext.define("treeModel",{ 3 　　extend:"E...
Extjs中ComboBoxTree实现的下拉框树效果(自写)
10-27
- 对于异步加载数据和Ajax请求的处理，确保树节点的动态加载不会导致界面卡顿或错误。 综上所述，实现ComboBoxTree这样的复合控件要求开发者不仅对Extjs的现有组件有深入了解，还要有扩展和自定义组件的能力。这种...
extjs动态树struts请求数据
05-07
总结以上，ExtJS动态树与Struts的结合使用，需要熟练掌握ExtJS TreePanel的配置，JSON数据的构造和解析，以及Struts2的Action和Result机制。通过Ajax请求，前端可以动态获取和更新树形数据，实现交互式用户界面。
ExtJs下拉树
06-11
- 通过配置，可以实现异步加载、懒加载，以优化性能。 综上所述，ExtJS的下拉树组件是通过组合ComboBox和TreePanel的特性，为用户提供了一种高效的数据选择方式。了解其工作原理和关键API，有助于开发者在实际项目...
Extjs自定义组件-下拉树
07-19
- 实例化`TreeLoader`，用于异步加载树节点数据。 - 创建`TreePanel`实例，配置其属性，包括宽度、高度、动画效果等。 - 定义事件处理器，如`treeClk`，用于处理树节点的点击事件。 #### 四、代码片段解析 ```...
extjs异步树，多选树，json数据机构，集成spring，struts例子
10-20
extjs异步树，多选树，json数据机构，集成spring，struts例子,extjs异步树，多选树，json数据机构，集成spring，struts例子,extjs异步树，多选树，json数据机构，集成spring，struts例子,extjs异步树，多选树，json数据机构，集成spring，struts例子,
extjs做的动态树
05-19
我们都是EXTJS做的界面吧，界面不光漂亮，而且非常实用，这是个例子，可以很好的借鉴一下~~
extjs实现动态树
10-12
extjs实现动态树
extjs tree 异步加载树型
06-14
extjs tree 异步加载树型完整的一个web工程，自已已经试过，可用。
Extjs 动态加载树
03-22
NULL 博文链接：https://kaobian.iteye.com/blog/996146
Extjs tree 异步加载 实例
玉无瑕
04-16 206
一:jsp 页面 组织树 Ext.require(['*']); Ext.onReady(function(){ //分级异步加载节点实例 //定义数据模型 Ext.regModel("orgInfo0",{ fields:['orgId','text'...
ExtJs+JSP构造动态树
翻滚吧小牛
02-04 1190
在实际生产中树的构造是需要根据后台数据库中存放的内容动态加载的，例如一个系统中，不同的角色有不同的权限，他们所能进行的操作也是不同的，如果需要构造一个树形结构展现某个角色所能进行的操作，这就用到了树形结构。 ExtJs提供了动态加载树形结构的机制，这里就用到了TreeStore动态加载，常用的动态加载数据格式有JSON和XML。 这里我们看一下如何使用JSON格式数据动态加载属性结构。 首先
ExtJs同步树/异步树
leisure55的学习笔记
11-12 8488
ExtJs异步树,异步方式获取数据1.下载Newtonsoft.Json.Net20.dll(.net 2.0版)后,放入Asp.net项目Bin文件夹中.   Newtonsoft.Json.Net20,是一个Object/Json转换工具,这里用来把对象转换成Json格式字符串.2.树节点Model对象,  public class TreeModel{        private st
extjs4 异步树的写法
lzq0107的博客
08-03 182
The data for this tree is asynchronously loaded through a TreeStore and AjaxProxy. js代码如下： Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.tip.*' ]); Ext.onReady(f...
Extjs入门：动态加载树结构实现与代码示例
在Extjs入门教程中，动态加载树是一项常见的功能，它允许用户在不刷新整个页面的情况下，根据用户的交互实时从服务器获取和显示数据，从而创建一个更灵活且性能良好的用户界面。本文档主要介绍了如何在Extjs框架中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值