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源码学习javascript(二)
Dec 27 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
localStorage实现便签小程序
Nov 28 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
js模糊查询实例分享
Dec 26 Javascript
node thread.sleep实现示例
Jun 20 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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树的代码,可以嵌套任意层
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
解析php5配置使用pdo
2013/07/03 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php生成图片验证码的方法
2016/04/15 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python 性能优化技巧总结
2016/11/01 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年转正工作总结
2014/11/08 职场文书
质量保证书
2015/01/17 职场文书
给校长的建议书范文
2015/09/14 职场文书
Python集合的基础操作
2021/11/01 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS