我要评论在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.程序效果如下图所示：
发表评论