TreePanel為ExtJS提供了一個(gè)方便的樹(shù)結(jié)構(gòu)數(shù)據(jù)展示,尤其是在處理JSON格式數(shù)據(jù)時(shí)十分常用,接下來(lái)我們就來(lái)看兩則JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析

在ExtJS中，不管是葉子節(jié)點(diǎn)還是非葉子節(jié)點(diǎn)，都統(tǒng)一用TreeNode表示樹(shù)的節(jié)點(diǎn)。在ExtJS中，有兩種類(lèi)型的樹(shù)節(jié)點(diǎn)。一種節(jié)點(diǎn)是普通的簡(jiǎn)單樹(shù) 節(jié)點(diǎn)，由Ext.tree.TreeNode定義，另外一種是需要異步加載子節(jié)點(diǎn)信息的樹(shù)節(jié)點(diǎn)，該類(lèi)由Ext.tree.AsyncTreeNode定 義。

在數(shù)據(jù)中， text 顯示文字， leaf 節(jié)點(diǎn) ， children 子節(jié)點(diǎn)，expanded 展開(kāi)

var store = Ext.create(‘Ext.data.TreeStore', {

root: {

expanded: true,

children: [

{ text: “留學(xué)”, leaf: true },

{ text: “功課”, expanded: true, children: [

{ text: “英語(yǔ)”, leaf: true },

{ text: “代數(shù)”, leaf: true}

] },

{ text: “托福”, leaf: true }

]

}

});

TreePanel從servlet中讀取JSON數(shù)據(jù)

在Ext JS的Tree中的數(shù)據(jù)往往是從服務(wù)器端的動(dòng)態(tài)程序中獲取的。

為了獲取數(shù)據(jù)，我們可以先編寫(xiě)一個(gè)返回JSON的Servlet共前臺(tái)的樹(shù)形組建訪問(wèn)：

服務(wù)器端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是前臺(tái)的AsyncTreeNode組建中設(shè)置的ID，見(jiàn)下面的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);

}

}

現(xiàn)在就可以在前臺(tái)的TreePanel組建的loader方法中訪問(wèn)上面創(chuàng)建的servlet了，代碼如下：

客戶(hù)端顯示代碼

Ext.onReady(function(){

var tree = new Ext.tree.TreePanel({

//這里的div-tree是在html中創(chuàng)建的一個(gè)對(duì)象的id值

el: 'div-tree',

//使用loader方法訪問(wèn)TreeNodeServlet

loader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})

});

var root = new Ext.tree.AsyncTreeNode({id:'0',text:'0'})

tree.setRootNode(root);

tree.render();

root.expand();

});

效果圖如下：

在樹(shù)TreePanel之間拖放結(jié)點(diǎn)

有時(shí)候我們?cè)诔绦蛑校枰岩豢肨reePanel的元素拖放到另外一棵TreePanel中，如果是在同一棵樹(shù)中拖動(dòng)時(shí)設(shè)置組件的enableDD參數(shù)為true，而現(xiàn)在需要在不同給的書(shū)之間拖動(dòng)元素，這個(gè)時(shí)候就可以設(shè)置組件的enableDrag和enableDrop參數(shù)，詳細(xì)示例如下：

1.編寫(xiě)JS代碼：

JS代碼

Ext.onReady(function(){

  var tree1 = new Ext.tree.TreePanel({

    el: 'tree1',

 //這里設(shè)置enableDrag為true表示可以從這里拖動(dòng)元素到別處

    enableDrag:true,

    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'})

  });

  var tree2 = new Ext.tree.TreePanel({

    el: 'tree2',

 //這里設(shè)置enableDrop為true表示可以在這棵樹(shù)中放置拖動(dòng)過(guò)來(lái)的元素

    enableDrop:true,

    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'})

  });

  var root1 = new Ext.tree.AsyncTreeNode({text:'跟節(jié)點(diǎn)'});

  var root2 = new Ext.tree.AsyncTreeNode({text:'圖書(shū)'});

  tree1.setRootNode(root1);

  tree2.setRootNode(root2);

  tree1.render();

  tree2.render();

});

2.HTML代碼如下：

HTML代碼

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

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

3.編寫(xiě)兩個(gè)TreeLoader需要裝載的txt文件，里面的數(shù)據(jù)為JSON格式：

treeData1.txt:

[

    {text:'非葉子結(jié)點(diǎn)'},

    {text:'葉子結(jié)點(diǎn)',leaf:true}

]

treeData2.txt:

[

  {text:'計(jì)算機(jī)',children:[

    {text:'Java',children:[

      {text:'Java核心技術(shù)',leaf:true},

      {text:'Thinking in Java',leaf:true}

    ]},

    {text:'算法導(dǎo)論',leaf:true}

  ]},

  {text:'音樂(lè)',children:[

    {text:'樂(lè)理基礎(chǔ)',leaf:true},

    {text:'卡爾卡西古典吉他教程',leaf:true}

    ]}

]

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