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


Posted in Javascript onMay 21, 2016

在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的使用实例解析

Javascript 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
vue cli 全面解析
Feb 28 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
IScroll5 中文API参数说明和调用方法
May 21 #Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 #Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 #Javascript
jQuery插件pagination实现无刷新分页
May 21 #Javascript
JavaScript中对JSON对象的基本操作示例
May 21 #Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 #Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python修改MP3文件的方法
2015/06/15 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
助理政工师申报材料
2014/06/03 职场文书
南京青奥会口号
2014/06/12 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
英文自荐信范文
2015/03/25 职场文书
导游词之日月潭
2019/11/05 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL