- 浏览: 805499 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (488)
- struts1 (4)
- spring (13)
- extjs (36)
- mysql (3)
- sqlserver (2)
- oracle (37)
- 杂谈 (11)
- 面试相关 (35)
- Java基础知识总结 (5)
- Java重要知识点 线程和io流知识点 (6)
- 服务器相关 (1)
- 生活 (1)
- jsp (7)
- servlet (2)
- junit (3)
- struts2 (9)
- 开发必备 (4)
- 使用开发工具总结的知识 (4)
- ibatis (12)
- ajax (2)
- dwr (2)
- jquery (1)
- 设计模式 (4)
- Lucene的学习 (5)
- 经验总结 (19)
- mysql全文搜索相关 (7)
- hibernate (33)
- Sphinx (1)
- log4j的总结 (1)
- 敏捷开发 (9)
- 持续集成 (15)
- UML使用总结 (1)
- Scrum (1)
- OO(面向对象编程) (1)
- struts1和struts2总结 (1)
- 数据库加密 (1)
- 多线程和Socket编程 (6)
- PowerDesigner (2)
- 权限相关 (1)
- ant应用总结 (4)
- 面试必知知识点总结 (6)
- io流与nio流总结 面试相关 (1)
- 敏捷管理工具的使用 (7)
- hsqldb相关 (1)
- svn源码相关 (2)
- debug调试技巧总结 (1)
- hibernate和ibatis对比相关 (6)
- eclipse mylyn 插件的使用总结 (2)
- fisheye使用总结 (2)
- java泛型总结 (1)
- ssh整合总结 (10)
- SpringSide的学习总结 (1)
- JPA学习总结 (2)
- RoR 总结 (2)
- 模型驱动 总结 (1)
- Oracle SQL优化技巧 (4)
- 数据库相关资料 (1)
- oracle练习相关 (4)
- PowerDesigner 使用总结 (2)
- Struts实现国际化相关 (2)
- 权限框架 Spring Security (1)
- freemarker使用总结 (1)
- jsp servlet总结相关 (3)
- Java NIO总结 (1)
- 自己学习必须 (3)
- 蝴蝶容器相关 (2)
- eclipse插件的使用 (1)
- myeclipse的使用 (1)
- flex相关 (1)
- javaeye重生后总结的知识点 (2)
- 公司学习总结 (3)
- JAXB 相关 (1)
- ECSide (1)
- EdoJs 企业ajax框架 (1)
- RSA加密算法 (1)
- jbpm相关 (1)
- JMF原理 (1)
- MyEclipse使用总结 (1)
- Funsion Charts 相关总结 (3)
- 常用知识2011 (2)
- Flex与Java整合 (1)
- IBM WebSphere相关 (1)
- jQuery使用技巧 (2)
- 2011年面试相关知识点总结 (2)
- sqlserver开发相关 (8)
- eclipse 打jar相关 (2)
- Oracle/Mysql/SqlServer比较 (1)
- WebService Axis1.4开发相关 (4)
- 进制数的转换 总结 (1)
- WebService Axis2.0开发相关 (0)
- iteye Struts2 Spring Hibernate整合相关 (3)
- iteye osgi资料相关总结 (1)
- iteye ifos相关相关 (1)
- iteye 国际化相关 (1)
- iteye Hibernate缓存机制 (4)
- iteye Struts2 总结 (1)
- iteye Struts标签总结 (0)
- iteye web配置文件大全 (6)
- iteye Efs 框架总结 (1)
- iteye sql优化 (2)
- iteye 大数据量高并发的数据库优化 (1)
- iteye 开发相关 (1)
- iteye s1sh 和 s2sh整合中的问题以及解决 (1)
- iteye s1sh整合实例 (1)
- iteye s2sh整合实例 (1)
- iteye 面试相关 基础篇 (1)
- iteye Android相关 (1)
- iteye 面试相关 Web篇 (1)
- iteye Sql Server相关 (0)
- iteye struts1与struts2比较 (1)
- iteye jquery 和Struts2 (0)
- iteye struts2与其他插件整合 (0)
- iteye jquery 开发相关 (1)
- iteye eclipse结合spket(Ext,Jquery)开发相关 (0)
- iteye myeclipse 使用技巧相关 (0)
- iteye Memcached 缓存系统相关 (0)
- iteye 常用软件相关 (0)
- iteye 最新技术预览 AjaxSwing (0)
- iteye struts上传下载相关 (0)
- iteye 新技术相关 (0)
- test (0)
- iteye 开发Java游戏相关 (0)
- iteye Java反编译 (0)
- iteye XML解析相关 (0)
- iteye 压缩ZIP相关 (0)
- iteye 面试相关 (0)
- iteye Android开发相关 (4)
- csdn (0)
- e-inoc (0)
- iteye http错误码对应说明 (0)
- iteye 面试扩展知识点 (0)
- iteye oracle面试相关 存储过程,触发器,游标等 (0)
- iteye english study (0)
- iteye starflow工作流引擎 (0)
- iteye IBM WebSphere Application Server Toolkit使用相关 (0)
- iteye spring3 (0)
- iteye mybatis (0)
- iteye js技巧总结 (0)
- iteye SEO优化相关 (2)
- iteye QUI网页界面集成框架 (1)
- iteye AjaxAnywhere (1)
- iteye Nutz相关 (1)
- iteye ibatis技巧 (0)
- iteye dwz (0)
- 128个ajax/javascript框架 (0)
- iteye 2012 Java Swing教程 (1)
- iteye 码头集装箱相关 (1)
- iteye swing (2)
- 兼职工作 (0)
- 2012 新总结的面试相关知识点 常用知识点 (1)
- 淘宝网店相关 (0)
- oracle 常用函数 2012新总结 (1)
- 我的时尚潮流屋 (0)
- 2012 年 面试新总结知识 (1)
- 技巧 (1)
- 2013总结 (1)
- 2015工作相关 (3)
- springmvc (5)
- EasyPR-Java (1)
- java (2)
- editplus 4.0 注册码 (1)
- android (1)
- oracle连接数据库相关 (1)
- 编程资料总结 (2)
- 20160808 (1)
- visio 2013 (1)
最新评论
-
drew926:
泛型的类型参数可以有多个?这是java哪个版本支持的?
java泛型总结 -
listenan:
赞!非常感谢。
Scrum总结 -
cwscwj:
写的很深刻,谢谢,看了一遍,过段时间打算再看一遍。
Scrum总结 -
hwedwin:
w
Struts 2中的OGNL\EL的使用总结 -
lanni2460:
不错 很好 支持……
sqlserver三个驱动包下载
ExtTree之右键菜单增删改及拖拽同步数据库
单凭一个ExtTree也要学习ExtJs是好多开发人员常说的话,的确,Ext对树的支持非常的好,并且展现起来非常美观。下面我就来通过代码介绍下我学习过程中关于ExtTree各方面的知识
代码如下:
Java代码
<SPAN style="FONT-SIZE: medium">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';
var Tree = Ext.tree;
// 定义根节点的Loader
var treeloader = new Tree.TreeLoader( {
dataUrl : "display.action?nodeId='A1'"
});
// 个人感觉上面这一步后面带的参数好像几乎没有起到作用,因为每次根节点第一次加载传数据时总是传递的是下面的
var treepanel = new Tree.TreePanel( {
// renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
el : 'tree_div', // 填充区域 ,后面的这个值是HTML页面上设置的DIV元素
rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
border : true, // 有边框
animate : true, // 动画效果
autoScroll : true, // 自动滚动
enableDD : true, // 拖拽节点
containerScroll : true,
// root:rotnode, //两种设置root节点的方法,
// 一种配置root,另一种就是setRootNode S
loader : treeloader,
useArrows : true,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false
// 对树所有结点都可选
// 一般来说treeloader都是加载第一次的请求路径,只不过跟没有动态加载数据的
// 形如:loader: new Tree.TreeLoader({
// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'
// })
// 上面的那个因为它是异步加载数据所以是这样写的loader:new
// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});
});
// 异步加载根节点
var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点,你必须手动写上他的名称
id : 'workArea',
text : '工区管理',
draggable : false
// 这个表示我的根节点是否可以拖拽,默认跟写FALSE一样都是以不可拖拽的
});
// 设置根节点 ,设置之后当然要放到tree中去了
treepanel.setRootNode(rootnode);
// 响应事件,传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求,这个请求传回来的数据导致你打开了下一级节点
// /响应事件,传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader
});
// Ext Tree demo里面,使用movenode : ( Tree tree, Node node, Node oldParent,
// Node newParent, Number index )
// 来响应节点的拖动操作,在Ext.tree.TreePanel的定义中,加入如下代码,响应拖动操作
// 在拖动的时候,主要通过发送ajax请求,到后台,进行数据的同步修改.(这一步非常重要)
treepanel.on('movenode',function(tree,node,oldParent,newParent,index){
Ext.Ajax.request({
url:'move.action',
params:{
nodeId:node.id,
oldParentId:oldParent.id,
newParentId:newParent.id,
index:index
}
});
});
/*
* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性,分别为dropNode,target,point
* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点
* 3.point为被放置的状态,分别有append表示添加,above节点的上方,below节点的下方。
*/
// treepanel.on('nodedrop', function(e) {
// if(e.point=='append'){
// Ext.Ajax.request({
// url:'node.action',
// params:{
// nodeId:e.dropNode.id,
// oldParentId:e.parentNode.id,
// newParentId:e.target.id
// }
// });
// }
// var msg;
// if (e.point == 'append') {
// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// + '】"下!';
// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// // + '】"下!');
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// } else if (e.point == 'above') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"上面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"上面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
//
// } else if (e.point == 'below') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"下面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"下面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// }
//
// // var viewPanel = Ext.getCmp('tree-window-view');
// // // 得到选中的节点
// // win.setTitle('消息提示');
// // win.show();
// // var tmpTpl = new Ext.Template(msg);
// // tmpTpl.overwrite(viewPanel.body);
// Ext.Msg.alert("消息提示", msg);
//
// });
treepanel.render(); // 这个tree当然要呈现出来喽
rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的,所以这个位置最佳了
// 定义右键菜单
var contextMenu = new Ext.menu.Menu( {
items : [ {
text : '添加子节点',
handler : addHandler
}, {
text : '添加兄弟点',
handler : addBrotherHandler
}, {
text : '删除',
handler : deleteHandler
}, {
text : '重命名',
handler : modifyHandler
}, {
text : '查看',
handler : viewHandler
} ]
});
// var treeSorter = new Ext.tree.TreeSorter(treepanel, {
// folderSort : true, //文件排序
// dir : 'asc' //升序, 这样如果排序的话,我的同级目录可能移动的时候就不起租
// });
var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器
allowBlank : false, // 允许出现空白
cancelOnEsc : true,// 按下ESC建自动取消空白
selectOnFocus : true
});
// 弹出窗口
var win = new Ext.Window( {
maskDisabled : false,
id : 'tree-window',
modal : true,// 是否为模式窗口
constrain : true,// 窗口只能在viewport指定的范围
closable : true,// 窗口是否可以关闭
closeAction : 'hide',
layout : 'fit',
width : 300,
height : 200,
plain : true,
items : [ {
id : 'tree-window-view',
border : false
} ]
});
treepanel.on('contextmenu', treeContextHandler);
// 拖拽后
treepanel.on('beforemovenode', function(tree, node, oldParent,
newParent, index) {
// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'
// + index);
// TODO 存储入库的操作
});
// 拖拽判断,用于处理叶节目不能append的问题
treepanel.on('nodedragover', function(e) {
var n = e.target;
if (n.leaf) {
n.leaf = false;
}
return true;
});
// treeEditor.on('complete', function(o, newText, oldText) {
// alert('执行我啊,编辑器处理玩了');
// Ext.Ajax.request({
// url:'addchildnode.action',
// params:{
// newname:newText,
// nodeId:currentId,
// oldname:oldValue
// }
// });
// },this,true);
var pid;
var flag;
treeEditor.on("complete", function(treeEditor){
alert(treeEditor.editNode.text);
var ppid=pid==null?treeEditor.editNode.id:pid;
var fflag=flag==null?'modify':flag;
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
});
// 绑定节点右键菜单功能
function treeContextHandler(node, event) {
event.preventDefault();//一说是组织浏览器的默认右键事件,二说是防止两次出现右键画面(怎么可能出现两次)
node.select();//选中右键单击的节点,有了它才有了希望
contextMenu.show(node.ui.getAnchor());
this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现
}
// 插入子节点
function addHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
pid=selectedNode.id;
flag='add';
selectedNode.leaf = false;
selectedNode.expand(false, true, function() {
// 注意,应该先由expand展开非叶子节点,才能为之插入子节点,否则会出错
selectedNode.appendChild(newNode);
treepanel.getSelectionModel().select(newNode);
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
});
}
function addBrotherHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
pid=selectedParentNode.id;
flag='add';
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
} else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
}
function deleteHandler() {
var nodeid=treepanel.getSelectionModel().getSelectedNode().id;
var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;
//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;
alert(nodeid+"==="+pnodeid);
Ext.Ajax.request({
url:'deletenode.action',
params:{
nodeId:nodeid,
oldParentId:pnodeid
}
});
treepanel.getSelectionModel().getSelectedNode().remove();
}
function modifyHandler() {
var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点
pid=selectedNode.id;
flag='modify';
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
}
function viewHandler() {
var viewPanel = Ext.getCmp('tree-window-view');
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
// 得到选中的节点
var tmpid = selectedNode.attributes.id;
var tmpname = selectedNode.attributes.text;
var tmpdes = selectedNode.attributes.description;
var tmphref = selectedNode.attributes.href;
win.setTitle(tmpname + '的介绍');
win.show();
var dataObj = {
id : tmpid,
name : tmpname,
des : tmpdes,
href : tmphref
}
var tmpTpl = new Ext.Template(
['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',
'<div style="margin:10px">名称:{name}</div>',
'<div style="margin:10px">描述:{des}</div>',
'<div style="margin:10px">链接:{href}</div></div></div>' ]);
tmpTpl.overwrite(viewPanel.body, dataObj);
}
// function myEditor(editor, newValue, oldValue) {
//
//// Ext.Ajax.request({
//// url:'addchildnode.action',
//// params:{
//// newname:newValue,
//// nodeId:currentId,
//// }
//// });
// }
});
</SPAN>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';
var Tree = Ext.tree;
// 定义根节点的Loader
var treeloader = new Tree.TreeLoader( {
dataUrl : "display.action?nodeId='A1'"
});
// 个人感觉上面这一步后面带的参数好像几乎没有起到作用,因为每次根节点第一次加载传数据时总是传递的是下面的
var treepanel = new Tree.TreePanel( {
// renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
el : 'tree_div', // 填充区域 ,后面的这个值是HTML页面上设置的DIV元素
rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
border : true, // 有边框
animate : true, // 动画效果
autoScroll : true, // 自动滚动
enableDD : true, // 拖拽节点
containerScroll : true,
// root:rotnode, //两种设置root节点的方法,
// 一种配置root,另一种就是setRootNode S
loader : treeloader,
useArrows : true,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false
// 对树所有结点都可选
// 一般来说treeloader都是加载第一次的请求路径,只不过跟没有动态加载数据的
// 形如:loader: new Tree.TreeLoader({
// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'
// })
// 上面的那个因为它是异步加载数据所以是这样写的loader:new
// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});
});
// 异步加载根节点
var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点,你必须手动写上他的名称
id : 'workArea',
text : '工区管理',
draggable : false
// 这个表示我的根节点是否可以拖拽,默认跟写FALSE一样都是以不可拖拽的
});
// 设置根节点 ,设置之后当然要放到tree中去了
treepanel.setRootNode(rootnode);
// 响应事件,传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求,这个请求传回来的数据导致你打开了下一级节点
// /响应事件,传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader
});
// Ext Tree demo里面,使用movenode : ( Tree tree, Node node, Node oldParent,
// Node newParent, Number index )
// 来响应节点的拖动操作,在Ext.tree.TreePanel的定义中,加入如下代码,响应拖动操作
// 在拖动的时候,主要通过发送ajax请求,到后台,进行数据的同步修改.(这一步非常重要)
treepanel.on('movenode',function(tree,node,oldParent,newParent,index){
Ext.Ajax.request({
url:'move.action',
params:{
nodeId:node.id,
oldParentId:oldParent.id,
newParentId:newParent.id,
index:index
}
});
});
/*
* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性,分别为dropNode,target,point
* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点
* 3.point为被放置的状态,分别有append表示添加,above节点的上方,below节点的下方。
*/
// treepanel.on('nodedrop', function(e) {
// if(e.point=='append'){
// Ext.Ajax.request({
// url:'node.action',
// params:{
// nodeId:e.dropNode.id,
// oldParentId:e.parentNode.id,
// newParentId:e.target.id
// }
// });
// }
// var msg;
// if (e.point == 'append') {
// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// + '】"下!';
// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// // + '】"下!');
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// } else if (e.point == 'above') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"上面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"上面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
//
// } else if (e.point == 'below') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"下面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"下面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// }
//
// // var viewPanel = Ext.getCmp('tree-window-view');
// // // 得到选中的节点
// // win.setTitle('消息提示');
// // win.show();
// // var tmpTpl = new Ext.Template(msg);
// // tmpTpl.overwrite(viewPanel.body);
// Ext.Msg.alert("消息提示", msg);
//
// });
treepanel.render(); // 这个tree当然要呈现出来喽
rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的,所以这个位置最佳了
// 定义右键菜单
var contextMenu = new Ext.menu.Menu( {
items : [ {
text : '添加子节点',
handler : addHandler
}, {
text : '添加兄弟点',
handler : addBrotherHandler
}, {
text : '删除',
handler : deleteHandler
}, {
text : '重命名',
handler : modifyHandler
}, {
text : '查看',
handler : viewHandler
} ]
});
// var treeSorter = new Ext.tree.TreeSorter(treepanel, {
// folderSort : true, //文件排序
// dir : 'asc' //升序, 这样如果排序的话,我的同级目录可能移动的时候就不起租
// });
var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器
allowBlank : false, // 允许出现空白
cancelOnEsc : true,// 按下ESC建自动取消空白
selectOnFocus : true
});
// 弹出窗口
var win = new Ext.Window( {
maskDisabled : false,
id : 'tree-window',
modal : true,// 是否为模式窗口
constrain : true,// 窗口只能在viewport指定的范围
closable : true,// 窗口是否可以关闭
closeAction : 'hide',
layout : 'fit',
width : 300,
height : 200,
plain : true,
items : [ {
id : 'tree-window-view',
border : false
} ]
});
treepanel.on('contextmenu', treeContextHandler);
// 拖拽后
treepanel.on('beforemovenode', function(tree, node, oldParent,
newParent, index) {
// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'
// + index);
// TODO 存储入库的操作
});
// 拖拽判断,用于处理叶节目不能append的问题
treepanel.on('nodedragover', function(e) {
var n = e.target;
if (n.leaf) {
n.leaf = false;
}
return true;
});
// treeEditor.on('complete', function(o, newText, oldText) {
// alert('执行我啊,编辑器处理玩了');
// Ext.Ajax.request({
// url:'addchildnode.action',
// params:{
// newname:newText,
// nodeId:currentId,
// oldname:oldValue
// }
// });
// },this,true);
var pid;
var flag;
treeEditor.on("complete", function(treeEditor){
alert(treeEditor.editNode.text);
var ppid=pid==null?treeEditor.editNode.id:pid;
var fflag=flag==null?'modify':flag;
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
});
// 绑定节点右键菜单功能
function treeContextHandler(node, event) {
event.preventDefault();//一说是组织浏览器的默认右键事件,二说是防止两次出现右键画面(怎么可能出现两次)
node.select();//选中右键单击的节点,有了它才有了希望
contextMenu.show(node.ui.getAnchor());
this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现
}
// 插入子节点
function addHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
pid=selectedNode.id;
flag='add';
selectedNode.leaf = false;
selectedNode.expand(false, true, function() {
// 注意,应该先由expand展开非叶子节点,才能为之插入子节点,否则会出错
selectedNode.appendChild(newNode);
treepanel.getSelectionModel().select(newNode);
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
});
}
function addBrotherHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
pid=selectedParentNode.id;
flag='add';
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
} else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
}
function deleteHandler() {
var nodeid=treepanel.getSelectionModel().getSelectedNode().id;
var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;
//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;
alert(nodeid+"==="+pnodeid);
Ext.Ajax.request({
url:'deletenode.action',
params:{
nodeId:nodeid,
oldParentId:pnodeid
}
});
treepanel.getSelectionModel().getSelectedNode().remove();
}
function modifyHandler() {
var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点
pid=selectedNode.id;
flag='modify';
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
}
function viewHandler() {
var viewPanel = Ext.getCmp('tree-window-view');
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
// 得到选中的节点
var tmpid = selectedNode.attributes.id;
var tmpname = selectedNode.attributes.text;
var tmpdes = selectedNode.attributes.description;
var tmphref = selectedNode.attributes.href;
win.setTitle(tmpname + '的介绍');
win.show();
var dataObj = {
id : tmpid,
name : tmpname,
des : tmpdes,
href : tmphref
}
var tmpTpl = new Ext.Template(
['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',
'<div style="margin:10px">名称:{name}</div>',
'<div style="margin:10px">描述:{des}</div>',
'<div style="margin:10px">链接:{href}</div></div></div>' ]);
tmpTpl.overwrite(viewPanel.body, dataObj);
}
// function myEditor(editor, newValue, oldValue) {
//
//// Ext.Ajax.request({
//// url:'addchildnode.action',
//// params:{
//// newname:newValue,
//// nodeId:currentId,
//// }
//// });
// }
});
后续说明,Ext中所有几乎涉及到与数据库有关又不知道改怎么办的时候,就在触发事件的处理方法中写上
Java代码
<SPAN style="FONT-SIZE: medium">Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
</SPAN>
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
这样的异步请求在Ext中随处可以用到,至于后台处理代码我就不贴了,大家应该也都知道,无非是接受参数,查询数据后
以JSON格式的数据传递回来即可当然JSON数据格式必须为:[{name:'张三'},{age:34},{sex:'男'}]这样数据形式的JSON数据,希望我的树代码能对大家起到一些作用,虽然有点乱,好多注释掉的代码也是有用的,大家可以取消注释试试看效果
单凭一个ExtTree也要学习ExtJs是好多开发人员常说的话,的确,Ext对树的支持非常的好,并且展现起来非常美观。下面我就来通过代码介绍下我学习过程中关于ExtTree各方面的知识
代码如下:
Java代码
<SPAN style="FONT-SIZE: medium">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';
var Tree = Ext.tree;
// 定义根节点的Loader
var treeloader = new Tree.TreeLoader( {
dataUrl : "display.action?nodeId='A1'"
});
// 个人感觉上面这一步后面带的参数好像几乎没有起到作用,因为每次根节点第一次加载传数据时总是传递的是下面的
var treepanel = new Tree.TreePanel( {
// renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
el : 'tree_div', // 填充区域 ,后面的这个值是HTML页面上设置的DIV元素
rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
border : true, // 有边框
animate : true, // 动画效果
autoScroll : true, // 自动滚动
enableDD : true, // 拖拽节点
containerScroll : true,
// root:rotnode, //两种设置root节点的方法,
// 一种配置root,另一种就是setRootNode S
loader : treeloader,
useArrows : true,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false
// 对树所有结点都可选
// 一般来说treeloader都是加载第一次的请求路径,只不过跟没有动态加载数据的
// 形如:loader: new Tree.TreeLoader({
// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'
// })
// 上面的那个因为它是异步加载数据所以是这样写的loader:new
// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});
});
// 异步加载根节点
var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点,你必须手动写上他的名称
id : 'workArea',
text : '工区管理',
draggable : false
// 这个表示我的根节点是否可以拖拽,默认跟写FALSE一样都是以不可拖拽的
});
// 设置根节点 ,设置之后当然要放到tree中去了
treepanel.setRootNode(rootnode);
// 响应事件,传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求,这个请求传回来的数据导致你打开了下一级节点
// /响应事件,传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader
});
// Ext Tree demo里面,使用movenode : ( Tree tree, Node node, Node oldParent,
// Node newParent, Number index )
// 来响应节点的拖动操作,在Ext.tree.TreePanel的定义中,加入如下代码,响应拖动操作
// 在拖动的时候,主要通过发送ajax请求,到后台,进行数据的同步修改.(这一步非常重要)
treepanel.on('movenode',function(tree,node,oldParent,newParent,index){
Ext.Ajax.request({
url:'move.action',
params:{
nodeId:node.id,
oldParentId:oldParent.id,
newParentId:newParent.id,
index:index
}
});
});
/*
* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性,分别为dropNode,target,point
* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点
* 3.point为被放置的状态,分别有append表示添加,above节点的上方,below节点的下方。
*/
// treepanel.on('nodedrop', function(e) {
// if(e.point=='append'){
// Ext.Ajax.request({
// url:'node.action',
// params:{
// nodeId:e.dropNode.id,
// oldParentId:e.parentNode.id,
// newParentId:e.target.id
// }
// });
// }
// var msg;
// if (e.point == 'append') {
// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// + '】"下!';
// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// // + '】"下!');
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// } else if (e.point == 'above') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"上面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"上面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
//
// } else if (e.point == 'below') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"下面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"下面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// }
//
// // var viewPanel = Ext.getCmp('tree-window-view');
// // // 得到选中的节点
// // win.setTitle('消息提示');
// // win.show();
// // var tmpTpl = new Ext.Template(msg);
// // tmpTpl.overwrite(viewPanel.body);
// Ext.Msg.alert("消息提示", msg);
//
// });
treepanel.render(); // 这个tree当然要呈现出来喽
rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的,所以这个位置最佳了
// 定义右键菜单
var contextMenu = new Ext.menu.Menu( {
items : [ {
text : '添加子节点',
handler : addHandler
}, {
text : '添加兄弟点',
handler : addBrotherHandler
}, {
text : '删除',
handler : deleteHandler
}, {
text : '重命名',
handler : modifyHandler
}, {
text : '查看',
handler : viewHandler
} ]
});
// var treeSorter = new Ext.tree.TreeSorter(treepanel, {
// folderSort : true, //文件排序
// dir : 'asc' //升序, 这样如果排序的话,我的同级目录可能移动的时候就不起租
// });
var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器
allowBlank : false, // 允许出现空白
cancelOnEsc : true,// 按下ESC建自动取消空白
selectOnFocus : true
});
// 弹出窗口
var win = new Ext.Window( {
maskDisabled : false,
id : 'tree-window',
modal : true,// 是否为模式窗口
constrain : true,// 窗口只能在viewport指定的范围
closable : true,// 窗口是否可以关闭
closeAction : 'hide',
layout : 'fit',
width : 300,
height : 200,
plain : true,
items : [ {
id : 'tree-window-view',
border : false
} ]
});
treepanel.on('contextmenu', treeContextHandler);
// 拖拽后
treepanel.on('beforemovenode', function(tree, node, oldParent,
newParent, index) {
// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'
// + index);
// TODO 存储入库的操作
});
// 拖拽判断,用于处理叶节目不能append的问题
treepanel.on('nodedragover', function(e) {
var n = e.target;
if (n.leaf) {
n.leaf = false;
}
return true;
});
// treeEditor.on('complete', function(o, newText, oldText) {
// alert('执行我啊,编辑器处理玩了');
// Ext.Ajax.request({
// url:'addchildnode.action',
// params:{
// newname:newText,
// nodeId:currentId,
// oldname:oldValue
// }
// });
// },this,true);
var pid;
var flag;
treeEditor.on("complete", function(treeEditor){
alert(treeEditor.editNode.text);
var ppid=pid==null?treeEditor.editNode.id:pid;
var fflag=flag==null?'modify':flag;
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
});
// 绑定节点右键菜单功能
function treeContextHandler(node, event) {
event.preventDefault();//一说是组织浏览器的默认右键事件,二说是防止两次出现右键画面(怎么可能出现两次)
node.select();//选中右键单击的节点,有了它才有了希望
contextMenu.show(node.ui.getAnchor());
this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现
}
// 插入子节点
function addHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
pid=selectedNode.id;
flag='add';
selectedNode.leaf = false;
selectedNode.expand(false, true, function() {
// 注意,应该先由expand展开非叶子节点,才能为之插入子节点,否则会出错
selectedNode.appendChild(newNode);
treepanel.getSelectionModel().select(newNode);
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
});
}
function addBrotherHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
pid=selectedParentNode.id;
flag='add';
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
} else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
}
function deleteHandler() {
var nodeid=treepanel.getSelectionModel().getSelectedNode().id;
var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;
//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;
alert(nodeid+"==="+pnodeid);
Ext.Ajax.request({
url:'deletenode.action',
params:{
nodeId:nodeid,
oldParentId:pnodeid
}
});
treepanel.getSelectionModel().getSelectedNode().remove();
}
function modifyHandler() {
var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点
pid=selectedNode.id;
flag='modify';
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
}
function viewHandler() {
var viewPanel = Ext.getCmp('tree-window-view');
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
// 得到选中的节点
var tmpid = selectedNode.attributes.id;
var tmpname = selectedNode.attributes.text;
var tmpdes = selectedNode.attributes.description;
var tmphref = selectedNode.attributes.href;
win.setTitle(tmpname + '的介绍');
win.show();
var dataObj = {
id : tmpid,
name : tmpname,
des : tmpdes,
href : tmphref
}
var tmpTpl = new Ext.Template(
['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',
'<div style="margin:10px">名称:{name}</div>',
'<div style="margin:10px">描述:{des}</div>',
'<div style="margin:10px">链接:{href}</div></div></div>' ]);
tmpTpl.overwrite(viewPanel.body, dataObj);
}
// function myEditor(editor, newValue, oldValue) {
//
//// Ext.Ajax.request({
//// url:'addchildnode.action',
//// params:{
//// newname:newValue,
//// nodeId:currentId,
//// }
//// });
// }
});
</SPAN>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';
var Tree = Ext.tree;
// 定义根节点的Loader
var treeloader = new Tree.TreeLoader( {
dataUrl : "display.action?nodeId='A1'"
});
// 个人感觉上面这一步后面带的参数好像几乎没有起到作用,因为每次根节点第一次加载传数据时总是传递的是下面的
var treepanel = new Tree.TreePanel( {
// renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
el : 'tree_div', // 填充区域 ,后面的这个值是HTML页面上设置的DIV元素
rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
border : true, // 有边框
animate : true, // 动画效果
autoScroll : true, // 自动滚动
enableDD : true, // 拖拽节点
containerScroll : true,
// root:rotnode, //两种设置root节点的方法,
// 一种配置root,另一种就是setRootNode S
loader : treeloader,
useArrows : true,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false
// 对树所有结点都可选
// 一般来说treeloader都是加载第一次的请求路径,只不过跟没有动态加载数据的
// 形如:loader: new Tree.TreeLoader({
// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'
// })
// 上面的那个因为它是异步加载数据所以是这样写的loader:new
// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});
});
// 异步加载根节点
var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点,你必须手动写上他的名称
id : 'workArea',
text : '工区管理',
draggable : false
// 这个表示我的根节点是否可以拖拽,默认跟写FALSE一样都是以不可拖拽的
});
// 设置根节点 ,设置之后当然要放到tree中去了
treepanel.setRootNode(rootnode);
// 响应事件,传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求,这个请求传回来的数据导致你打开了下一级节点
// /响应事件,传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader
});
// Ext Tree demo里面,使用movenode : ( Tree tree, Node node, Node oldParent,
// Node newParent, Number index )
// 来响应节点的拖动操作,在Ext.tree.TreePanel的定义中,加入如下代码,响应拖动操作
// 在拖动的时候,主要通过发送ajax请求,到后台,进行数据的同步修改.(这一步非常重要)
treepanel.on('movenode',function(tree,node,oldParent,newParent,index){
Ext.Ajax.request({
url:'move.action',
params:{
nodeId:node.id,
oldParentId:oldParent.id,
newParentId:newParent.id,
index:index
}
});
});
/*
* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性,分别为dropNode,target,point
* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点
* 3.point为被放置的状态,分别有append表示添加,above节点的上方,below节点的下方。
*/
// treepanel.on('nodedrop', function(e) {
// if(e.point=='append'){
// Ext.Ajax.request({
// url:'node.action',
// params:{
// nodeId:e.dropNode.id,
// oldParentId:e.parentNode.id,
// newParentId:e.target.id
// }
// });
// }
// var msg;
// if (e.point == 'append') {
// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// + '】"下!';
// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text
// // + '】"下!');
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// } else if (e.point == 'above') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"上面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"上面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
//
// } else if (e.point == 'below') {
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text
// // + '"下面!');
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text
// + '"下面!';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// }
//
// // var viewPanel = Ext.getCmp('tree-window-view');
// // // 得到选中的节点
// // win.setTitle('消息提示');
// // win.show();
// // var tmpTpl = new Ext.Template(msg);
// // tmpTpl.overwrite(viewPanel.body);
// Ext.Msg.alert("消息提示", msg);
//
// });
treepanel.render(); // 这个tree当然要呈现出来喽
rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的,所以这个位置最佳了
// 定义右键菜单
var contextMenu = new Ext.menu.Menu( {
items : [ {
text : '添加子节点',
handler : addHandler
}, {
text : '添加兄弟点',
handler : addBrotherHandler
}, {
text : '删除',
handler : deleteHandler
}, {
text : '重命名',
handler : modifyHandler
}, {
text : '查看',
handler : viewHandler
} ]
});
// var treeSorter = new Ext.tree.TreeSorter(treepanel, {
// folderSort : true, //文件排序
// dir : 'asc' //升序, 这样如果排序的话,我的同级目录可能移动的时候就不起租
// });
var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器
allowBlank : false, // 允许出现空白
cancelOnEsc : true,// 按下ESC建自动取消空白
selectOnFocus : true
});
// 弹出窗口
var win = new Ext.Window( {
maskDisabled : false,
id : 'tree-window',
modal : true,// 是否为模式窗口
constrain : true,// 窗口只能在viewport指定的范围
closable : true,// 窗口是否可以关闭
closeAction : 'hide',
layout : 'fit',
width : 300,
height : 200,
plain : true,
items : [ {
id : 'tree-window-view',
border : false
} ]
});
treepanel.on('contextmenu', treeContextHandler);
// 拖拽后
treepanel.on('beforemovenode', function(tree, node, oldParent,
newParent, index) {
// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'
// + index);
// TODO 存储入库的操作
});
// 拖拽判断,用于处理叶节目不能append的问题
treepanel.on('nodedragover', function(e) {
var n = e.target;
if (n.leaf) {
n.leaf = false;
}
return true;
});
// treeEditor.on('complete', function(o, newText, oldText) {
// alert('执行我啊,编辑器处理玩了');
// Ext.Ajax.request({
// url:'addchildnode.action',
// params:{
// newname:newText,
// nodeId:currentId,
// oldname:oldValue
// }
// });
// },this,true);
var pid;
var flag;
treeEditor.on("complete", function(treeEditor){
alert(treeEditor.editNode.text);
var ppid=pid==null?treeEditor.editNode.id:pid;
var fflag=flag==null?'modify':flag;
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
});
// 绑定节点右键菜单功能
function treeContextHandler(node, event) {
event.preventDefault();//一说是组织浏览器的默认右键事件,二说是防止两次出现右键画面(怎么可能出现两次)
node.select();//选中右键单击的节点,有了它才有了希望
contextMenu.show(node.ui.getAnchor());
this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现
}
// 插入子节点
function addHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
pid=selectedNode.id;
flag='add';
selectedNode.leaf = false;
selectedNode.expand(false, true, function() {
// 注意,应该先由expand展开非叶子节点,才能为之插入子节点,否则会出错
selectedNode.appendChild(newNode);
treepanel.getSelectionModel().select(newNode);
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
});
}
function addBrotherHandler() {
var newNode = new Ext.tree.TreeNode( {
text : '新建节点'
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
pid=selectedParentNode.id;
flag='add';
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
} else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
}
function deleteHandler() {
var nodeid=treepanel.getSelectionModel().getSelectedNode().id;
var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;
//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;
alert(nodeid+"==="+pnodeid);
Ext.Ajax.request({
url:'deletenode.action',
params:{
nodeId:nodeid,
oldParentId:pnodeid
}
});
treepanel.getSelectionModel().getSelectedNode().remove();
}
function modifyHandler() {
var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点
pid=selectedNode.id;
flag='modify';
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
}
function viewHandler() {
var viewPanel = Ext.getCmp('tree-window-view');
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
// 得到选中的节点
var tmpid = selectedNode.attributes.id;
var tmpname = selectedNode.attributes.text;
var tmpdes = selectedNode.attributes.description;
var tmphref = selectedNode.attributes.href;
win.setTitle(tmpname + '的介绍');
win.show();
var dataObj = {
id : tmpid,
name : tmpname,
des : tmpdes,
href : tmphref
}
var tmpTpl = new Ext.Template(
['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',
'<div style="margin:10px">名称:{name}</div>',
'<div style="margin:10px">描述:{des}</div>',
'<div style="margin:10px">链接:{href}</div></div></div>' ]);
tmpTpl.overwrite(viewPanel.body, dataObj);
}
// function myEditor(editor, newValue, oldValue) {
//
//// Ext.Ajax.request({
//// url:'addchildnode.action',
//// params:{
//// newname:newValue,
//// nodeId:currentId,
//// }
//// });
// }
});
后续说明,Ext中所有几乎涉及到与数据库有关又不知道改怎么办的时候,就在触发事件的处理方法中写上
Java代码
<SPAN style="FONT-SIZE: medium">Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
</SPAN>
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID
}
});
这样的异步请求在Ext中随处可以用到,至于后台处理代码我就不贴了,大家应该也都知道,无非是接受参数,查询数据后
以JSON格式的数据传递回来即可当然JSON数据格式必须为:[{name:'张三'},{age:34},{sex:'男'}]这样数据形式的JSON数据,希望我的树代码能对大家起到一些作用,虽然有点乱,好多注释掉的代码也是有用的,大家可以取消注释试试看效果
发表评论
-
Ext 文档相关
2010-11-22 12:55 1040Ext 文档相关 -
Ext3.2中文API(最终完成版2010-10-25)
2010-11-15 10:25 1520Ext3.2中文API(最终完成版2010-10-25).CH ... -
Ext.data.Connection
2010-08-28 23:11 1059Ext.data.Connection Ext.data.C ... -
EXt tree 简单增、删、改、查
2010-08-26 17:43 1817EXt tree 简单增、删、改、查 js: E ... -
Extjs总结
2010-08-23 17:07 2147ExtJS是一个用javascript写的,主要用于创建前端用 ... -
在Struts2.0中使用JSON结合DWR和EXT
2010-08-23 08:24 1635在Struts2.0中使用JSON结合DWR和EXT 如 ... -
搭建EXTJS和STRUTS2框架(ext和struts2简单实例)
2010-08-23 08:17 1065新建一个工程struts2工程teaweb(因为现在所做的项目 ... -
EditorGridPanel中ComboBox显示问题?
2010-08-19 23:52 1491function getConsumerUnit(value) ... -
ExtJS3.0之可编辑表格EditorGridPanel
2010-08-19 23:45 2030ExtJS3.0之可编辑表格EditorGridPanel ... -
div左图右文布局效果 收藏
2010-08-19 23:22 1479div左图右文布局效果 收藏 <!DOCTYPE htm ... -
Ext Js Grid 编辑 新增 删除 保存的一个小示例
2010-08-19 23:20 2311Ext Js Grid 编辑 新增 删除 保存的一个小示例 & ... -
xt中combobox在grid显示问题
2010-08-19 23:16 1259xt中combobox在grid显示问题 问题描述:我在ed ... -
Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法
2010-08-19 20:27 1780<HTML> <HEAD> &l ... -
在Ext中EditorGrid中datefield输入问题解决过程
2010-08-19 20:22 1760在Ext中EditorGrid中datefield输入问题解决 ... -
在extjs中,用GridPanel来显示数据
2010-08-19 17:44 1557在extjs中,用GridPanel来显示数据,需要用到Sto ... -
使用Ext实现拖拉功能
2010-08-19 14:24 1390<!DOCTYPE html PUBLIC &q ... -
深入浅出Ext JS:一个完整的EXT应用
2010-08-19 14:16 2318在本文中,我们将综合运用前面所学的知识,开发一个简单的学生信息 ... -
Ext.GridPanel 用法总结(一)—— Grid基本用法
2010-08-19 12:23 1703Ext.GridPanel 用法总结(一)—— Grid基本用 ... -
Ext.ux.grid.RowEditor的使用
2010-08-19 10:42 3763Ext.ux.grid.RowEditor的使用 RowEd ... -
ext+dwr完整的例子(包括树,增删改查等)
2010-08-14 21:14 1333ext+dwr完整的例子(包括树,增删改查等) 文章分类:We ...
相关推荐
级别名称都存在SQL数据库有三个字段(自动增长ID、父级ID、节点名称) 数据库文件都有,另外怕个别附加不上数据,所以创建数据库、表代码...通过不同的阶级 右键显示不同的菜单。可以无限增至下级 无限制。可扩展性强。
ZTree右键增删改功能! html文件可直接运行!
绝对经典,可以增删改的树形菜单,只提供代码,帮助新手
ztree 支持右键 增、删、改操作,容易上手,右键弹出窗口式增加节点,方便扩展。
主要介绍了element-ui tree结构实现增删改自定义功能代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
由于项目需要,需要对DTree通过右键菜单进行增删查改,我根据网上的资料和自己的需求进行修改的,希望对大家有所帮助。
通过鼠标右键点击,动态实现增 删 改树状目录导航
LINQTOSQL GridControl增删改查 直接改动数据库里面的数据
树的操作【菜单增删改拖动】 完善的资源 完善的源代码
简单的ASP.NET MVC增删改项目,SQL数据库
ssm+velocity增删改分页(含数据库)。(适合初学者)。
需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
国家开放大学 MySQL数据库应用 实验训练3 数据增删改操作
MYSQL数据库习题 查询增删改
ASP.NET MVC Linq to SQL 实现数据库增删改(源代码)ASP.NET MVC Linq to SQL 实现数据库增删改(源代码) ASP.NET MVC 分页控件
关于建立树形菜单以及树形菜单的增、删、改、查
tree例子,也是从网上找的,其中有tree点击右键进行增删改
flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据
不错的树形菜单,连接mysql数据库,可实现增删改功能,绑定菜单URL等等。
右键某个树形菜单节点,弹出小界面可以删除 编辑 增加,而且可以双击节点进入编辑模式。ajax配套的。领你进门接下来自己处理吧。祝你成功! -------静态测试数据为您准备好了贴心吗?=)接下来看你的了---------- [ ...