动态异步加载树 ExtJS2,以JSON(JavaScript Object Notation)TreeLoader

引用:http://blog.163.com/chunchun_1010/blog/static/76482548201031744931142/

使用ExtJS2,以JSON(JavaScript Object Notation)TreeLoader 异步读取数据,构造一棵异步加载的树

 

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

   下载Ext JS 2.1 SDK:ext-2.2.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写tree.js文件。 

   关于Ext.tree.TreePanel,可以参考: 

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


   tree.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文件调用tree.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" ></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. tree.js中ExtJS的TreeLoader调用的tree.jsp。 

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

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

   extjsTree.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()%> 

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


8.  


   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文件需要解压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"> 


9. AJAX 

   AJAX:Asynchronous JavaScript and XML(异步JavaScript和XML) 
      
   只是为了树,也要学ExtJS。 

   ExtJS2.1+JSON = 动态异步加载的树

你可能感兴趣的:(JavaScript)