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

在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();

});

效果图如下:

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

(0)

相关推荐

  • ExtJs动态生成treepanel的Json格式

    在节点中加上"checked"属性,会自动生成checkbox. 获取选中节点 var nodeArray = ""; var nodesObj = mytree.getChecked(); var i;var length=nodesObj .length; for (i = 0; i < length; i++) { nodeArray += nodesObj[i].id + ','; //允许多选的情况.如果不允许多选,就直接nodesObj[i].id

  • extjs4 treepanel动态改变行高度示例

      复制代码 代码如下: //css代码 .x-row-class{ line-height:30px; } //js代码 },{ text: '技能分配', flex: 1, width:150, dataIndex: 'skillDistribut', sortable: true, renderer:function(value, metaData, record, rowIndex, columnIndex, store){ metaData.tdAttr= "data-qtip='&q

  • 关于extjs treepanel复选框选中父节点与子节点的问题

     extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f

  • extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    复制代码 代码如下: //树 var treePanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree(treePanel); /*渲染树*/ }, checkchange: function(node, state) {

  • 层序遍历在ExtJs的TreePanel中的应用

    原理非常简单,就是树的层序遍历,在遍历过程中遇到第一个叶子节点即完成工作. 效果如下图:代码如下: 复制代码 代码如下: var currentRootNode = null;//当前选择的根节点 function NodeClass() { //定义一个节点类 var nodeValue = null; var nextNode = null;//下一个节点 } function InitQueue(queue) { //初始化一个队列 queue = new NodeClass();//头节

  • Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能.其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text.id.icon.checked等.异步树Ext.tree.AsyncTreeNode.树加载器Ext.tree.TreeLoader.下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果. 在 treepanel 里添加以下代码即可实现级联选中效果 主要实现了以下效果: 1.点击父级批量设置所有子节点选中状

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

    在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点.在ExtJS中,有两种类型的树节点.一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定 义. 在数据中, text 显示文字, leaf 节点 , children 子节点,expanded 展开 var store = Ext.create('Ext.data.TreeStore', { root

  • javascript浅层克隆、深度克隆对比及实例解析

    这篇文章主要介绍了javascript浅层克隆.深度克隆对比及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.浅层克隆, (引用值改变, 两个都一起变) var obj = { name : 'xiaoming', age : 12, children : ['mimi','lili','rokey'] } var obj2 = {}; function clone(origin, target) { var target = ta

  • JavaScript的ExtJS框架中表格的编写教程

    ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,SimpleStore,GroupingStore- 一个表格的基本编写过程: 1.创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header:

  • JavaScript 异步调用框架 (Part 3 - 代码实现)

    类结构 首先我们来搭一个架子,把需要用到的似有变量都列出来.我们需要一个数组,来保存回调函数列表:需要一个标志位,来表示异步操作是否已完成:还可以学IAsyncResult,加一个state,允许异步操作的实现者对外暴露自定义的执行状态:最后加一个变量保存异步操作结果. 复制代码 代码如下: Async = { Operation: { var callbackQueue = []; this.result = undefined; this.state = "waiting"; th

  • javascript实现iframe框架延时加载的方法

    本文实例讲述了javascript实现iframe框架延时加载的方法.分享给大家供大家参考.具体实现方法如下: 有的时候我们希望页面的一些东西实现延时加载,这样可以不影响网站打开速度,下面我来给大家介绍javascript实现iframe框架延时加载方法吧. 需要加载区域HTML代码: 复制代码 代码如下: <div id="indexlogin"></div> 下面代码放在底部 复制代码 代码如下: <span id="tmpjsnews&qu

  • javascript 缓冲运动框架的实现

    javascript 缓冲运动框架的实现 框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架. 实例代码: /** * Created by wang on 2016/8/3. */ //获取非行间样式和行间样式 function getStyle(obj,name) { if(obj.currentStyle){ return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; }

  • 完美解决jQuery符号$与其他javascript 库、框架冲突的问题

    目前有大量的 javascript 开发框架,其中有一部分使用 $ 作为调用符号,这可能导致相互之间的冲突,而 jQuery 为解决这个问题,可以在 jQuery 导入时放弃 $ 使用权,届时 $ 则由其它框架使用,这样可以避免相同名字的函数调用不再冲突. jQuery 使用 noConflict 方法来放弃 $ 调用时的命名,之后由 jQuery 代替 $ 进行编写. 例如:alert($('#message').val()); 必须修改为 alert(jQuery('#message').v

  • JointJS JavaScript流程图绘制框架解析

    JointJS:JavaScript 流程图绘制框架 最近调研了js画流程图的框架,最后选择了Joint.配合上 dagre 可以画出像模像样的流程图. JointJS 简介 JointJS 是一个开源前端框架,支持绘制各种各样的流程图.工作流图等.Rappid 是 Joint 的商业版,提供了一些更强的插件.JointJS 的特点有下面几条,摘自官网: 能够实时地渲染上百(或者上千)个元素和连接 支持多种形状(矩形.圆.文本.图像.路径等) 高度事件驱动,用户可自定义任何发生在 paper 下

  • 使用Bootstrap框架制作查询页面的界面实例代码

    以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人

  • jQuery EasyUI 折叠面板accordion的使用实例(分享)

    1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属性 fit 为 true,自适应父容器大小 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>easyui-折叠面板accordion的使用

随机推荐