`
JavaCrazyer
  • 浏览: 3011912 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

ExtTree之右键菜单增删改及拖拽同步数据库

阅读更多

单凭一个ExtTree也要学习ExtJs是好多开发人员常说的话,的确,Ext对树的支持非常的好,并且展现起来非常美观。下面我就来通过代码介绍下我学习过程中关于ExtTree各方面的知识

代码如下:

 

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&currenRootId="+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&currenRootId="+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&currenRootId="+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中所有几乎涉及到与数据库有关又不知道改怎么办的时候,就在触发事件的处理方法中写上
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数据,希望我的树代码能对大家起到一些作用,虽然有点乱,好多注释掉的代码也是有用的,大家可以取消注释试试看效果


 

3
0
分享到:
评论
1 楼 demojava 2010-07-23  
不错,我最近做一个两个tree在同一个页面拖拽到另一个tree中并保存拖拽后的数据json,有什么好的解决方案吗给一个

相关推荐

    C# TreeView和ContextMenuStrip右键菜单增删改

    级别名称都存在SQL数据库有三个字段(自动增长ID、父级ID、节点名称) 数据库文件都有,另外怕个别附加不上数据,所以创建数据库、表代码...通过不同的阶级 右键显示不同的菜单。可以无限增至下级 无限制。可扩展性强。

    ztree 支持右键 增删改操作

    ZTree是一款广泛应用于Web开发中的JavaScript树形控件,它具有丰富...总之,ZTree通过右键菜单实现了对树形数据的增删改功能,使得Web应用中的树形操作更加便捷,同时其高度定制化的特点为开发者提供了广阔的设计空间。

    treeview树右键可以增删改

    要使树形菜单具备增删改功能,需要在前端提供相应的用户交互接口,例如右键菜单。当用户选择某个操作时,前端应发送请求到服务器端,执行对应的数据库操作。具体来说: - **增加节点**:在指定父节点下新增一个子...

    ZTree右键增删改功能!

    ZTree右键增删改功能! html文件可直接运行!

    dTree+JQuery右键菜单(增删改)

    在这个案例中,"dTree+JQuery右键菜单(增删改)"是一个结合了JavaScript库dTree和jQuery实现的功能增强,特别是针对树形结构数据的管理。dTree是一款轻量级的JavaScript库,用于创建交互式的树形菜单,而jQuery则是...

    ajax+C#右键 动态增删改 TreeView

    本项目重点在于结合`Ajax`技术与`C#`后端处理,实现了右键菜单功能,使用户可以通过鼠标右键点击`TreeView`节点,动态进行增、删、改操作,极大地提升了用户体验。 `Ajax`(Asynchronous JavaScript and XML)是一...

    Windows 右键菜单增强工具中文绿色便携全功能版_2020最新_管理右键菜单

    通过**右键菜单管理**,我们可以对默认的右键菜单进行增删改,例如添加新的快捷方式,删除不再需要的项目,或者调整菜单顺序,使其更加符合个人工作习惯。这对于频繁进行文件操作的用户尤其有用,能显著减少操作步骤...

    GridControl增删改查到数据库

    "GridControl增删改查到数据库"这个主题聚焦于如何利用UI组件GridControl与LINQ to SQL技术来实现对数据库数据的CRUD(Create, Read, Update, Delete)操作。下面将详细解释相关知识点。 首先,GridControl是一种...

    element-ui tree结构实现增删改自定义功能代码

    在本文中,我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库,它提供了丰富的组件供开发者使用,其中包括Tree组件,用于展示层级关系的数据。在描述的...

    树的操作【菜单增删改拖动】.zip

    3. **菜单操作**:在资源包中,"菜单"可能指的是与树节点相关的右键菜单,用户可以通过菜单进行增删改操作。菜单项的添加、删除和修改通常通过ExtJS的Menu类和MenuItem类实现,通过监听用户的点击事件来执行相应操作...

    windows右键菜单管理器

    通过这个管理器,用户可以方便地进行右键菜单的增删改操作,优化自己的工作环境,提高效率。 一、右键菜单的作用与构成 右键菜单,也称为上下文菜单,当用户在桌面、文件、文件夹或者程序上点击鼠标右键时出现。它...

    Ext+ssh+sybase增删改

    综上所述,"EXT+SSH+Sybase增删改"涉及的技术栈包括前端EXTJS框架的UI设计和数据操作,通过SSH协议的安全远程通信,以及后端数据库的SQL操作。在实际项目中,开发者需要结合这些技术,构建出能够高效、安全地管理...

    树形菜单增删改

    在IT领域,树形菜单是一种常见的用户界面元素,尤其在数据层级关系复杂的应用中,如文件管理系统、组织结构展示或数据库导航等。本主题将详细探讨如何构建树形菜单,以及涉及的“增、删、改、查”操作。 首先,我们...

    右键菜单管理.zip

    在Windows操作系统中,右键菜单是用户日常工作中频繁使用的功能之一。它提供了快速访问和执行各种操作的途径。"右键菜单管理.zip"是一个专为Windows设计的实用工具,允许用户自定义右键新建菜单,根据个人需求添加或...

    国家开放大学 MySQL数据库应用 实验训练3 数据增删改操作

    MySQL数据库应用实验训练3 数据增删改操作 MySQL数据库应用实验训练3 数据增删改操作是国家开放大学提供的实验训练,旨在让学生熟悉 MySQL 数据库的基本操作,包括数据的增删改操作。实验中,学生将学习使用 Insert...

    Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 &lt;el-tree class="treeitems" :data="data...

    完美者右键扩展菜单管理器 V1.21(支持win7)

    "右键扩展"意味着用户可以通过该工具自由地添加自定义的快捷操作到右键菜单中,无论是针对文件、文件夹还是特定的系统对象,都可以根据个人需求定制个性化的操作选项,让常用的功能触手可及。 "右键删除"功能则使得...

    简单的ASP.NET MVC增删改项目,SQL数据库

    在这个项目中,我们专注于使用ASP.NET MVC进行基本的数据操作,如增、删、改,同时结合了SQL数据库来存储和检索数据。以下是对这个项目及其相关知识点的详细说明: 1. **ASP.NET MVC框架**:ASP.NET MVC(Model-...

    flex4 简单增删改实例 使用mysql数据库

    flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据

Global site tag (gtag.js) - Google Analytics