JavaScript的ExtJS框架中數面板TreePanel的使用實例解析

2019-11-20 09:58:32

字體：大中小

來源：轉載

供稿：網友

在ExtJS中，不管是葉子節點還是非葉子節點，都統一用TreeNode表示樹的節點。在ExtJS中，有兩種類型的樹節點。一種節點是普通的簡單樹節點，由Ext.tree.TreeNode定義，另外一種是需要異步加載子節點信息的樹節點，該類由Ext.tree.AsyncTreeNode定義。
在數據中， text 顯示文字， leaf 節點， children 子節點，expanded 展開

var store = Ext.create(‘Ext.data.TreeStore', {root: {expanded: true,children: [{ text: “留學”, leaf: true },{ text: “功課”, expanded: true, children: [{ text: “英語”, leaf: true },{ text: “代數”, leaf: true}] },{ text: “托福”, leaf: true }]}});

TreePanel從servlet中讀取JSON數據
在Ext JS的Tree中的數據往往是從服務器端的動態程序中獲取的。
為了獲取數據，我們可以先編寫一個返回JSON的Servlet共前臺的樹形組建訪問：
服務器端servlet代碼：

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;public class TreeNodeServlet extends HttpServlet {protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");//這里的node是前臺的AsyncTreeNode組建中設置的ID，見下面的JS程序String treeNode = request.getParameter("node");String json = "";PrintWriter out = response.getWriter();if("0".equals(treeNode)) {json+="[{id:1,text:'0-1'},{id:2,text:'0-2'}]";}else if("1".equals(treeNode)) {json+="[{id:11,text:'0-1-1',leaf:true},{id:12,text:'0-1-2',leaf:true}]";}else if("2".equals(treeNode)) {json+="[{id:21,text:'0-2-1'},{id:22,text:'0-2-2',leaf:true}]";}else if("21".equals(treeNode)) {json+="[{id:211,text:'0-2-1-1',leaf:true},{id:212,text:'0-2-1-2',leaf:true}]";}out.write(json);}}

現在就可以在前臺的TreePanel組建的loader方法中訪問上面創建的servlet了，代碼如下：
客戶端顯示代碼

Ext.onReady(function(){var tree = new Ext.tree.TreePanel({//這里的div-tree是在html中創建的一個對象的id值el: 'div-tree',//使用loader方法訪問TreeNodeServletloader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})});var root = new Ext.tree.AsyncTreeNode({id:'0',text:'0'})tree.setRootNode(root);tree.render();root.expand();});

效果圖如下：

2016521110621249.png (266×168)

在樹TreePanel之間拖放結點
有時候我們在程序中，需要把一棵TreePanel的元素拖放到另外一棵TreePanel中，如果是在同一棵樹中拖動時設置組件的enableDD參數為true，而現在需要在不同給的書之間拖動元素，這個時候就可以設置組件的enableDrag和enableDrop參數，詳細示例如下：

1.編寫JS代碼：
JS代碼

Ext.onReady(function(){  var tree1 = new Ext.tree.TreePanel({    el: 'tree1', //這里設置enableDrag為true表示可以從這里拖動元素到別處    enableDrag:true,    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'})  });  var tree2 = new Ext.tree.TreePanel({    el: 'tree2', //這里設置enableDrop為true表示可以在這棵樹中放置拖動過來的元素    enableDrop:true,    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'})  });  var root1 = new Ext.tree.AsyncTreeNode({text:'跟節點'});  var root2 = new Ext.tree.AsyncTreeNode({text:'圖書'});  tree1.setRootNode(root1);  tree2.setRootNode(root2);  tree1.render();  tree2.render();});

2.HTML代碼如下：
HTML代碼

<div id="tree1"></div><div id="tree2"></div>

3.編寫兩個TreeLoader需要裝載的txt文件，里面的數據為JSON格式：
treeData1.txt:

[    {text:'非葉子結點'},    {text:'葉子結點',leaf:true}]treeData2.txt:[  {text:'計算機',children:[    {text:'Java',children:[      {text:'Java核心技術',leaf:true},      {text:'Thinking in Java',leaf:true}    ]},    {text:'算法導論',leaf:true}  ]},  {text:'音樂',children:[    {text:'樂理基礎',leaf:true},    {text:'卡爾卡西古典吉他教程',leaf:true}    ]}]

4.程序效果如下圖所示：

2016521110709614.png (531×309)