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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js 居中漂浮广告
2010/03/21 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
python练习程序批量修改文件名
2014/01/16 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
竞聘书模板
2014/03/31 职场文书
房屋委托书范本
2014/04/04 职场文书
升职自荐信范文
2015/03/27 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
投资合作意向书范本
2015/05/08 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书