`

extjs加载json数据生成树

jsonEXTJSPJavaScriptCSS 
阅读更多

使用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 ＝ 动态异步加载的树

分享到：
| extjs 学习笔记
评论
1 楼 lanfenggogo 2011-11-13  
  多谢多谢
发表评论

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

相关推荐

    Extjs 无限树菜单 后台拼接json

    "Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据，并通过JSON格式传输到前端进行渲染。 首先，我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...

    ExtJs 连接数据库并且生成动态树

    在“ExtJs 连接数据库并且生成动态树”这个主题中，我们将探讨如何利用ExtJs来连接后端数据库，并动态生成树形结构来展示数据。 首先，要实现ExtJs连接数据库，你需要一个服务器端的数据接口，它可以是基于PHP、...

    extjs动态树struts请求数据

    总结以上，ExtJS动态树与Struts的结合使用，需要熟练掌握ExtJS TreePanel的配置，JSON数据的构造和解析，以及Struts2的Action和Result机制。通过Ajax请求，前端可以动态获取和更新树形数据，实现交互式用户界面。

    Extjs4生成树

    总结，使用ExtJS4生成树形结构涉及创建`Ext.tree.Panel`，定义节点数据，以及可能的动态加载配置。通过`proxy`和`reader`设置与服务器进行数据交互，实现按需加载。在实际应用中，还需要考虑用户交互，如节点的展开...

    extjs tree + json+struts2示例源代码

    7. **加载树数据**：当页面加载完成后，TreePanel会自动发送请求到服务器，获取JSON数据并渲染树结构。 通过以上步骤，你就能够实现一个完整的ExtJS Tree + JSON + Struts2的示例。这个系统不仅可以用于目录浏览，...

    ASP.NET运用ExtJs与WCF交互生成Tree目录树实例

    在该实例中，开发者可能首先创建了一个WCF服务，这个服务包含了获取目录树数据的方法。这些方法可能接受特定的参数，如根目录路径，然后返回一个表示目录结构的数据模型，如JSON格式的数组。JSON（JavaScript Object...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中，ExtJS用于前端UI的构建，JSON作为数据交换格式，而Struts2则作为后端MVC框架处理请求和返回...

    ExtJS 3.4关于TreePanel的一些实例

    2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 11. 树形的拖放...

    Extjs Tree + JSON + Struts2

    ExtJS Tree + JSON + Struts2 是一个常见的前端与后端交互技术组合，常用于构建动态的、数据驱动的树形结构界面。在这个项目中，`index.html` 是主页面，`tree.js` 包含了 ExtJS 的树组件相关的 JavaScript 代码，`...

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

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

    ExtJS构造动态异步加载

    本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构，结合AJAX技术实现JSON数据的高效传输。 首先，我们要理解什么是动态异步加载。在传统的网页开发中，如果一次性加载所有数据，可能会导致页面加载速度慢，...

    JPA STRUTS SPRING EXTJS JSON 同学录

    5. **JSON**: JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在本项目中，JSON 用于在服务器端（如Spring）和客户端（如EXTJS）之间传输数据。例如...

    两种JS生成树方式的源码

    在JavaScript（JS）中生成树形结构，通常用于创建如导航菜单、文件系统视图或者组织数据。在给定的标题和描述中提到了两种方法：一是使用现成的插件，二是采用自定义的JS代码。这两种方法各有优缺点，下面我们将详细...

    EXTJS 动态生成下来树形框

    动态生成下拉树形框是EXTJS中一个常见的需求，它允许用户在一个下拉菜单中展示层次化的数据结构，比如组织架构或者文件系统。这篇博客（）可能会详细讲解如何实现这个功能。 在EXTJS中，我们通常使用`Ext.tree....

    自己写的一个动态从后台数据库加载Ext.tree的json数据工具类

    JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输，因为其易于人阅读和编写，同时也易于机器解析和生成。 接下来，我们讨论这个工具类如何实现动态加载。动态加载通常指的是按...

    Ext+json+jsp动态加载树

    在动态加载树的场景中，服务器通过JSP生成JSON格式的数据，这些数据包含了树节点的信息，如节点ID、文本、子节点等，然后由前端的ExtJS应用解析并展示在树形视图上。 3. **JSP（JavaServer Pages）**：JSP是Java的...

    ExtJs动态生成treepanel的Json格式

    动态生成TreePanel的JSON格式是构建可交互树形结构的关键步骤，特别是当数据需要根据用户操作或服务器响应实时更新时。 在JSON格式中，每个节点都是一个对象，包含以下关键属性： 1. `text`: 节点的显示文本。 2. ...

    ext利用js生成树

    10. **最佳实践**: 在使用ExtJS生成树形结构时，注意优化数据加载，避免一次性加载大量数据。同时，确保树的层次清晰，易于用户理解和操作。 以上就是关于"ext利用js生成树"的核心知识点。通过理解和运用这些概念，...

    extjs,ssh开发的crm

    ExtJS收到JSON数据后，可以方便地将数据绑定到组件，如表格和树形结构，实时更新UI。 **Tree组件** 在CRM系统中通常用于组织和展示层次化数据，比如客户分类、部门结构或项目层级。ExtJS提供强大的TreePanel组件，...

    extjs .net

    描述中提到的"根据数据库数据生成json，然后动态生成树（异步）"这部分，是Web应用中常见的数据展现方式。在数据库中获取数据后，通常会将其转换为JSON（JavaScript Object Notation）格式，因为JSON是一种轻量级的...

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