<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document </title>
<link rel="stylesheet" type="text/css" href="../res/js/ext-3.2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../res/js/ext-3.2.0/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../res/js/ext-3.2.0/ext-all.js">
</script>
</head>
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;">
</div>
</body>
</html>
<script>
menuTree = new Ext.tree.TreePanel({
el: "tree-div",
animate: true,
title: "Extjs动态树",
collapsible: true,
enableDD: true,
enableDrag: true,
rootVisible: true,
autoScroll: true,
autoHeight: true,
width: "30%",
lines: true,
listeners: {
"contextmenu": function(node, e){
//列出右键菜单
menu = new Ext.menu.Menu([{
xtype: "button",
text: "添加节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(tree){
onInsertNode();
}
}, {
xtype: "button",
text: "添加子节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(){
myExpand(node);
}
}, {
xtype: "button",
text: "修改节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(){
onUpdate();
}
}, {
xtype: "button",
text: "删除节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(tree){
onDeleteNode();
}
}]);
//显示在当前位置
menu.showAt(e.getPoint());
}
}
});
//根节点
var root = new Ext.tree.TreeNode({
id: "root",
text: "集团公司",
editable: true,
expanded: true
});
var sub1 = new Ext.tree.TreeNode({
id:1,
text: "子公司1",
singleClickExpand: true
})
root.appendChild(sub1);
menuTree.setRootNode(root);//设置根节点
menuTree.render();//不要忘记render()下,不然不显示哦
menuTree.on('contextmenu',showRightClickMenu,sRightClickMenu);
var RightClickMenu = new Ext.menu.Menu({
//右击事件
items: [{
xtype: "button",
text: "添加节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(tree){
onInsertNode();
}
}, {
xtype: "button",
text: "添加子节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(){
myExpand(node);
}
}, {
xtype: "button",
text: "修改节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(){
onUpdate();
}
}, {
xtype: "button",
text: "删除节点",
icon: "images/icon/menuitem.gif",
pressed: true,
handler: function(tree){
onDeleteNode();
}
}]
});
function showRightClickMenu(node, e){
//先让该节点被选中
node.select();
//参数node是右击的那个节点，即事件源
//参数e是事件对象
this.showAt(e.getPoint());
}
/********添加节点**********/
function onInsertNode(){
Ext.Msg.prompt('请输入新建的节点名称', '新建标准名称', this.onInsertNodePrompt, this);
}
function onInsertNodePrompt(btn,text){
if (btn == 'ok') {
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
var newNode = new Ext.tree.TreeNode({
text:text
});
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
}
else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function(){
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
}
};
/**删除节点**/
function onDeleteNode(){
Ext.Msg.confirm('系统提示', '你是否确定删除此标准?', this.onDeleteNodeConfirm, this);
};
function onDeleteNodeConfirm(btn){
if (btn == 'yes') {
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
selectedNode.remove();
}
};
/***修改节点**/
function onUpdate(){
Ext.Msg.confirm('系统提示', '你是否确定修改此标准?', this.onUpdateNode, this);
};
function onUpdateNode(){
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
Ext.Msg.prompt('请输入修改的节点名称', '修改名称', this.onUpdateNodePrompt, this, false, selectedNode.text);
};
function onUpdateNodePrompt(btn, text){
if (btn == 'ok') {
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
selectedNode.setText(text);
setTimeout(function(){
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
}, 10);
}
};
/******************************************
展开子节点
******************************************/
function myExpand(node){
if (node.item(0) == undefined) {
node.appendChild(new Ext.tree.TreeNode({
id: node.id + '1',
text: node.text + "的第一个儿子",
hrefTarget: "mainFrame",
handler: function(){
myExpand(node);
}
}));
}
node.expand();
};
</script>
分享到：
相关推荐
EXT是一个强大的JavaScript库，...通过实际代码示例，我们可以更深入地理解EXT动态树的操作方式。在实践中，结合EXT的API文档和示例代码，可以更好地掌握这些概念和技巧，从而创建出功能强大且用户友好的动态树组件。
压缩包中的文档或注释应该包含了如何导入项目、运行示例以及如何进行树的增删改操作和下拉树的使用说明。建议首先阅读项目中的README文件或相关文档，了解项目的结构和依赖，然后在MyEclipse中导入项目，配置数据库...
本文将重点讨论“ext2.0树的增删改”这一主题，结合myeclipse8.5开发环境、MySQL数据库以及struts2框架，深入解析如何实现树型数据结构的操作，并添加权重功能。 首先，让我们了解一下ext2.0。ext2是Linux操作系统...
在"EXT2.0 带无限极树的 增删改差 是用jsp+servlet+ext2.0实现的"这个项目中，我们将探讨如何使用EXT2.0与后端的Java技术，如JSP和Servlet，协同工作来实现数据管理的基本操作：添加（Add）、删除（Delete）、修改...
在"Ext.NET后台分页增删改"这个主题中，我们将探讨如何利用Ext.NET实现数据库后台分页、树形视图操作以及Grid面板的CRUD（创建、读取、更新和删除）功能。 首先，让我们深入了解一下后台分页。在Ext.NET中，为了...
现在我们将围绕“EXT+SSH+Sybase增删改”的主题进行深入讲解。 EXTJS在创建Web应用中的主要角色是提供美观且功能强大的UI组件，如表格、表单、树形视图等。在"增删改"操作中，EXTJS的Grid Panel组件可以用于显示...
本例子采用ext3.0+java开发的树结构，完全的动态管理，树结构一旦形成，支持右键菜单，进行增删改，增加，就在树当前节点下创建一个新的节点，利用ajax同步到数据库，总之类似于资源管理器的增删改，由于本人是初学...
标题中的“SQL Server + VS2005 + 3层结构 + EXT2.0 + ajax 的 增删改 的例子”揭示了这个压缩包文件包含了一套使用特定技术栈实现的Web应用程序示例，主要涉及到数据库管理、前端交互以及应用程序架构设计。...
这个压缩包文件包含的示例和资源主要展示了如何利用ExtJS实现数据操作（增删改查）以及树形视图（TreePanel）的界面设计。 首先，"增删改查"（CRUD，Create、Read、Update、Delete）是任何数据驱动应用的基础功能。...
在静态EXT树中，“静态”可能意味着该树一旦构建完成，就不会有动态的增删改操作，而是专注于高效的读取性能。这通常通过预计算和优化索引来实现。 描述中提到的“博文链接：https://ljbal.iteye.com/blog/1005934...
7. **权限控制**：虽然描述中没有明确提到，但在实际的企业级应用中，增删改操作通常会涉及到权限控制。EXTJS可以通过ActionColumn或自定义的控制器实现权限判断，限制用户的操作。 这个“EXT学习小例子”项目为...
标题中的“extjs做的增删改查”表明这个主题聚焦于使用ExtJS框架实现数据管理的基本操作，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。ExtJS是一个流行的JavaScript库，用于构建富客户端应用...
开发者可能需要修改"TreeGridEditor"中的方法，以调用DWR服务，将前端的增删改操作同步到后台数据库中。 总的来说，实现"动态添加编辑拖拽的树形表格"需要对EXT和jQuery有深入理解，熟悉前端的事件处理和数据操作，...
7.5.11 树节点：ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器：ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
在这个例子中，EXT JS 被用来构建用户界面，实现与ASP.NET MVC后端的交互，如展示学生信息、执行增删改操作。 【SQL Server】 SQL Server是微软开发的关系型数据库管理系统，广泛应用于企业级数据存储和管理。在本...
包括布局、事件、grid的绑定（包含增删改）以及数据库分页还有表单绑定取值和dateview控件的使用，树的使用，包含拖拉，修改等操作 dll文件为extnet3.5,可自行下载黏贴到要目录下的net35文件夹里即可
rar包：一个Web工程， 主要有，利用Spring-ldap对LDAP的基本操作（查询，增删改）；Extjs实现的对Ldap的树状结构的显示，结构有点类似Softerra LDAP;一个测试类。 pdf：spring-ldap-reference.pdf Extjs.pdf ...
- 人员维护：管理各部门用户，进行增删改操作，同样以目录树形式展示人员结构。 - 角色管理：通过角色分配，设置人员权限，每个角色对应特定的用户权限组合。 - 档案编码管理：依据TB/T 1588-2005标准进行档案...
在Linux中，实现文件的增删改功能主要通过系统调用完成。例如，`open()`用于打开一个文件，`read()`和`write()`用于读写文件内容，`close()`关闭已打开的文件，`mkdir()`创建目录，`unlink()`删除文件，`rename()`...