extjs treepanel java_JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

weixin_39778668

于 2021-02-13 17:11:39 发布

阅读量95

点赞数

文章标签： extjs treepanel java

本文链接：https://blog.csdn.net/weixin_39778668/article/details/114147105

版权

在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表示可以在这棵树中放置拖动过来的元素