2. 程式人生 > >使用ExtJS2構造動態非同步載入的樹

使用ExtJS2構造動態非同步載入的樹

阿新 • • 發佈：2018-11-12

標題：使用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包的版本！

相關推薦

使用ExtJS2構造動態非同步載入的樹

標題：使用ExtJS2構造動態非同步載入的樹 作者：JRQ   連結：http://blog.csdn.net/jrq/archive/2008/06/15/2549839.aspx   正文： &n

關於EXT 動態非同步載入Tree

終於把非同步載入tree 研究出來了，大體思路就是給treeloader的 dataUrl指定一個noteid.然後後臺再根據不同的noteid做不同的操作。返回的節點json中的Id一定不能重複，不然出來的tree，會

Ext.data.TreeStore 分級非同步載入樹節點示例

Ext.data.TreeStore遠端載入樹節點有兩種常用方式，分別是：分級載入和整體載入。對於結構複雜資料量大的樹結構使用分級載入可以極大提高程式響應速度並提升使用者體驗。客戶端：<%@ page language="java" import="java.util.

EasyUI 樹型選單 非同步載入樹

問題描述：想用EasyUI實現樹結構，點選加號時，展開的子節點不正確。 問題解決： 展開第一層節點和展開其他子節點一樣，可以呼叫一個方法。當前節點的id能自動傳到後臺。 效果圖： 關鍵程式碼： 後臺是SpringMVC+mybatis+Spring，控制層程式碼如下: /

ZTree學習（二）：非同步載入樹結構

一，使用場景 遇到這種大資料載入，特別的樹結構，而且是在彈出層中載入的，就會出現閃一下或者是卡主的情況，所以選擇非同步載入。 二，非同步載入使用關鍵，還是在setting引數上 var setting = { async:{ autoParam:[

簡單知識點例項之二：如何動態生成div框並且同時非同步載入資料

一、動態生成框並且同時ajax非同步請求資料 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm

element ui 全載入樹節點內子項的動態更新

為了持之以恆的勳章，不得不在9月的最後幾天，水幾篇原創文章（無奈ing）。本人剛接觸element ui，屬於白痴一個，如果有更好的的方法，歡迎大神留言交流，感激不盡！！！ 其實跟《element ui 懶載入樹節點內子項的動態更新》道理大致是一樣的。 我們得到選中的的節點，或者說是待更

element ui 懶載入樹節點內子項的動態更新

為了保持住持之以恆的勳章，不得不在9月的最後幾天內水幾篇原創文章。本人是剛接觸element ui，屬於大白菜一顆，大神有其他方法的話，歡迎評論留言指導。   <el-tree :props="props1" :load="loadNode1" lazy

使用zTree.js動態載入樹節點小結

樹外掛一般用與多級分類，許可權管理選單，這個Ztree功能還是基本滿足我們的需求 直接上程式碼 @{ ViewBag.Title = "zTree"; } <h2> @ViewBag.Title</h2> <link href="~/zTree_v3

下拉表關聯非同步載入不是事兒 - 引數動態過濾

對於報表，簡單來說就是用表格、圖表等格式來動態顯示資料以及資料之間的關係，同時，經常伴隨的，也是很重要的一個功能就是給報表增加各種條件，對資料進行篩選，以便找出使用者最關心的資料。 篩選條件常常不止一項，也就是我們常說的多條件查詢，同時這些條件之間可能還有關聯關係，比如最常見的“省份”和“城市”

RDIFramework.NET ━ .NET快速資訊化系統開發框架 V3.2->新增“行政區域管理”，同時大批量樹採用非同步載入

　　行政區劃：簡稱政區，是國家為了進行分級管理而實行的區域劃分。中國現行的行政區劃實行如下原則：1、全國分為省、自治區、直轄市；2、省、自治區分為自治州、縣、自治縣、市；3、自治州分為縣、自治縣、市；4、縣、自治縣分為鄉、民族鄉、鎮； 5、直轄市和較大的市分為區、縣；6、國家在必要時設立的特別行政區。行政區劃

在非同步載入 AsyncTask 中用動態的陣列作為引數

分析問題：在非同步執行的時候，                           new DownloadTextTask().execute("http://192.168.1.56:30002/?ID=101&NO=0",                  

用ExtJS 實現動態載入樹（Load tree）

  用ExtJS 實現動態載入樹（Load tree） 1、資料庫背景：這裡有一個組織機構表，結構如下： Oracle DDL指令碼： createtable ORGANIZATION( ORGIDNUMBER(10) notnull, PARENTIDNUMBER(1

extjs4.2 動態載入樹 treePanel

        由於專案的需求，需要寫一個動態的樹（treePanel），具體的資料從資料庫中查詢出來，搞了我差不多兩天的時候，都沒有能夠在extjs的前臺正確的顯示出來，網上參考了無數例子，修改了N多遍，都是無法實現。採用了兩種方法，一種就是在前臺獲取資料以後，使用treeNode，鬱悶的是extj

EXTJS5的學習記錄之TreePanel樹的本地載入與非同步載入

  首先來建立一個store資料來源 var store = Ext.create('Ext.data.TreeStore', { root: { expanded: false,//預設不展開 children: [

爬蟲知識點（ajax非同步載入，JavaScript 動態重新整理，phantomjs + selenium模擬登陸）

JavaScript JavaScript 是網路上最常用也是支持者最多的客戶端指令碼語言。它可以收集 使用者的跟蹤資料,不需要過載頁面直接提交表單，在頁面嵌入多媒體檔案，甚至執行網頁遊戲。 Ajax  當你訪問一個網頁時 滑鼠向下滑 資料不斷的更新而http網址沒有變

jquery來製作動態載入樹

最近更新的後臺樹節點的載入方式。因為以前用的是jquery-treeview外掛。 但是上網查了下資料，發現用它來實現樹節點的動態載入還是挺麻煩的。於是我自己寫了個動態載入的方式。下面貼程式碼。 css樣式： .treeview li{background: url(

extjs4 動態載入樹選單和相應的按鈕是否顯示 ，到對許可權的控制粒度細化到按鈕

初步想到對許可權的控制的就是樹選單從資料庫載入，同時也載入相應 增刪改查 按鈕setVisible和setDisabled的true or false值。 我這裡演示用手動設定這些值模擬資料庫查詢到的值。 先說明一下，用setVisible和setDisabled來實現控制

ext4下拉樹選項框comboboxtree(支援非同步載入子節點）

ext版本：4 簡介：支援多選、單選、非同步載入子節點（當然一下子拼接好全部節點的json也是絕對沒問題的），(已測試通過)瀏覽器相容ie8、ie11、谷歌、FF。 轉載請說明出處：http://blog.csdn.net/seedingly/article/detail

由二叉樹構造赫夫曼樹

family 如果 csdn img log ret iss struct center 赫夫曼樹： 如果有n個權值{w1,w2,w3....},試構造一棵具有n個葉子節點的二叉樹，每一個葉子節點帶權為wi。則當中帶權路徑長度最小的二叉樹稱為最優二叉樹或者叫赫夫曼樹。