ext 做的动态树，可以进行增删改

最新推荐文章于 2019-10-01 20:13:10 发布

jiangyang1986

最新推荐文章于 2019-10-01 20:13:10 发布

阅读量157

点赞数

分类专栏： js 文章标签： EXT UI HTML

本文链接：https://blog.csdn.net/jiangyang1986/article/details/83666101

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>