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学习笔记之Helloworld
Dec 22 Javascript
javascript数组去掉重复
May 12 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
BootStrap导航栏问题记录
2017/07/31 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python修改文件内容的3种方法详解
2019/11/15 Python
详解Python中import机制
2020/09/11 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
自我评价中英文语句
2013/11/30 职场文书
幼儿园家长评语
2014/02/10 职场文书
外联部演讲稿
2014/05/24 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书