华山资源网

JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
网络编程 2024/11/18 佚名
3 1

在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方法访问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();

});

效果图如下：

JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

在树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.程序效果如下图所示：

JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com