【转】extjs加载json数据动态生成树

最新推荐文章于 2015-02-04 14:40:30 发布

冬天的白雪

最新推荐文章于 2015-02-04 14:40:30 发布

阅读量7.3k

点赞数

文章标签： extjs json string import tree javascript

使用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>

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

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();
}