tree.html
Grid Examples
tree.js
/** ******************************************
- 作者：Peter
- 版本：1.0
- 版权：
- 时间：2009-3-4 * ****************************************** */
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
Ext.QuickTips.init();
var mytree = new MyTree.TreePanel("28",600,400,"0");
mytree.init();
});
Ext.namespace('My');
Ext.namespace('MyTree');
MyTree.TreePanel = function(treeid,width,height,rootid){
this.treeid = treeid;
this.rootid = rootid;
this.init = function(){
var tbdel = new Ext.Toolbar.Button({
id:"tbdel"+this.treeid,
text:"删除",
handler:function(){
var node =tree.opNode;
if(!node){alert("请选择树节点！"); return false;}
MyTree.delNode(node);
}
});
var tbadd = new Ext.Toolbar.Button({
id:'tbadd'+this.treeid,
text: '新增',
handler: function(){
var node =tree.opNode;
if(!node){alert("请选择树节点！"); return false;}
MyTree.addNode(node);
}
});
var tbrename = new Ext.Toolbar.Button({
id:"tbrename"+treeid,
text:"重命名",
handler:function(){
var node =tree.opNode;
if(!node){alert("请选择树节点！"); return false;}
MyTree.renameNode(node);
}
});
var tbar = new Ext.Toolbar({
id:'Toolbar'+this.treeid,
items : [tbadd,tbrename,tbdel]
});
var tree = new Ext.tree.TreePanel({
id: "tree"+this.treeid,
animate: true,//设置在展开和收缩节点时是否使用动画效果
width: this.width,
height: this.height,
tbar: tbar,
loader: new My.TreeLoader({dataUrl:'tree.php'})
});
var root = this.root();
tree.setRootNode(root);
tree.render(Ext.getBody());
root.expand();
tree.on("click",function(node){
tree.opNode = node;
node.select();
});
tree.on("contextmenu",function(node,event){
event.preventDefault();
node.select();
var depth = node.getDepth();
if(node.id!='0'){
if(depth<=2){
MyTree.rightmenulevel1(node,event);
}else{
MyTree.rightmenulevel3(node,event);
}
}
});
};
//树形区块的宽度
this.width = width;
//树形区块的高度
this.height = height;
//树形区块根节点的定义
this.root = function(){
return new Ext.tree.AsyncTreeNode({
text:"根节点",
id :this.rootid,
qtip:"根节点"
})
}
};
My.TreeLoader = function(config){
this.baseParams = {};
Ext.apply(this, config);
this.addEvents(
"beforeload",
"load",
"loadexception"
);
My.TreeLoader.superclass.constructor.call(this);
};
Ext.extend(My.TreeLoader, Ext.tree.TreeLoader, {
getParams: function(node){
var buf = [], bp = this.baseParams;
for(var key in bp){
if(typeof bp[key] != "function"){
buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
}
}
buf.push("node=", encodeURIComponent(node.id));
return buf.join("");
},
requestData : function(node, callback){
if(this.fireEvent("beforeload", this, node, callback) !== false){
this.transId = Ext.Ajax.request({
method:this.requestMethod,
url: this.dataUrl||this.url,
success: this.handleResponse,
failure: this.handleFailure,
scope: this,
argument: {callback: callback, node: node},
params: this.getParams(node)
});
}else{
if(typeof callback == "function"){
callback();
}
}
}
});
//自定义树 --各种操作方法
MyTree.addsomelevelNode = function(node){
Ext.MessageBox.prompt('添加同级节点', '请输入同级节点名称:', function (btn,text){
if(btn=='ok'){
if(text==''){alert('节点名称不能为空');return false;}
var newnode = new Ext.tree.TreeNode({
id:'newnode'+Math.random(),//该ID应从服务器端返回
text:text
});
//node.leaf= false;
node.parentNode.appendChild(newnode);
}
});
}
MyTree.addNode = function(node){
Ext.MessageBox.prompt('添加子节点', '请输入子节点名称:', function (btn,text){
if(btn=='ok'){
if(text==''){alert('节点名称不能为空');return false;}
var newnode = new Ext.tree.TreeNode({
id:'newnode'+Math.random(),//该ID应从服务器端返回
text:text
});
node.leaf= false;
node.appendChild(newnode);
}
});
}
MyTree.renameNode = function(node){
Ext.MessageBox.prompt('节点重命名', '将"'+node.text+'" 修改为:', function (btn,text){
if(btn=='ok'){
if(text==''){alert('节点名称不能为空');return false;}
node.setText(text);//更新节点内容
}
});
}
MyTree.delNode = function(node){
if(!node){ alert("请选择树节点");return false;}
Ext.MessageBox.confirm("请确认","真的要删除这个的节点？",function(button,text){
if(button=="yes"){
node.remove();
}
});
}
MyTree.rightmenulevel1 = function(node,event){
var menu = new Ext.menu.Menu({
id :'menu'+node.id,
items : [
{
id:"level1"+node.id+'1',
text : "新增同级分类",
handler:function (){
MyTree.addsomelevelNode(node);
//alert('新增同级分类');
}
},{ id:'level1'+node.id+'2',
text:'新增子分类',
handler:function(){
MyTree.addNode(node);
}
},{ id:'level1'+node.id+'3',
text:'重名名',
handler:function(){
MyTree.renameNode(node);
}
},{ id:'level1'+node.id+'5',
text:'删除',
handler:function(){
MyTree.delNode(node);
}
}
]
});
menu.showAt(event.getXY());
return menu;
}
MyTree.rightmenulevel3 = function(node,event){
var menu = new Ext.menu.Menu({
id :'menu'+node.id,
items : [
{
id:"level3"+node.id+'1',
text : "新增同级分类",
handler:function (){
MyTree.addsomelevelNode(node);
//alert('新增同级分类');
}
},{ id:'level3'+node.id+'4',
text:'重名名',
handler:function(){
MyTree.renameNode(node);
}
},{ id:'level3'+node.id+'5',
text:'删除',
handler:function(){
MyTree.delNode(node);
}
}
]
});
menu.showAt(event.getXY());
return menu;
}
tree.jsp
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
// 对应的是正在展开的节点id
String node = request.getParameter("node");
System.out.println(node);
String content = "";
if ("0".equals(node)) {
content += "[{id:1,text:'节点阿一'},{id:2,text:'节点阿二'}]";
} else if ("1".equals(node)) {
content += "[{id:11,text:'节点阿一一',leaf:false},{id:12,text:'节点阿一二',leaf:true}]";
} else if ("2".equals(node)) {
content += "[{id:21,text:'节点阿二一',leaf:true},{id:22,text:'节点阿二二',leaf:true}]";
} else if ("11".equals(node)) {
content += "[{id:111,text:'节点阿一一一',leaf:true},{id:112,text:'节点阿一一二',leaf:true}]";
}
response.getWriter().print(content);
%>
[b]问题补充：[/b]
路径都改对了~还是错误；还是EXT未定义~
[b]问题补充：[/b]
报错说是98行 ‘My’未定义~
[b]问题补充：[/b]
2379行~
错误时对象不支持次方法或属性
[b]问题补充：[/b]
O(∩_∩)O~；多谢哦~我刚才自己把错误调出来了~谢谢你的指点哦~那个firebug我以前没怎么用过~第一次用用的不熟练；上网查了半天才会了一点点~
