功能强大的EXTJS的tree的节点操作
来源:互联网 发布:微信修复数据在哪里找 编辑:程序博客网 时间:2024/05/16 14:41
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
id: 'tree-mianban',
title : '树',
region : 'west',
animate : true,
enableDD : true,
containerScroll : false,
loader : new Ext.tree.TreeLoader({
dataUrl : 'myjs/advancedTree01.json'
}),
lines : true,
// selModel : new Ext.tree.MultiSelectionModel(),
containerScroll : false,
border : true
});
// 根节点
var root = new Ext.tree.AsyncTreeNode({
text : '木叶',
draggable : false,
id : 'root'
// /children : json
});
// 树形编辑器
var treeEditor = new Ext.tree.TreeEditor(Ext.getCmp('tree-mianban'), {
id : 'tree-Manage',
allowBlank : false
// 输入值不可以为空
});
// 弹出窗口
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
}]
});
// 给tree添加事件
tree.on('rightClickCont', tree.rightClick, tree);
// 模块销毁函数
function destroy() {
this.win.destroy();// 将win窗口销毁,否则在IE中会报错
}
// 本例的主角,加载 tree TreePanel
tree.setRootNode(root);
tree.render(document.body);
root.expand(true, true);
// 定义右键菜单
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont',
items : [{
id : 'addNode',
text : '添加',
// 增加菜单点击事件
menu : [{
id : 'insertNode',
text : '添加兄弟节点',
handler : function(tree) {
insertNode();
}
}, {
id : 'appendNode',
text : '添加儿子节点',
handler : function(tree) {
appendNodeAction();
}
}]
}, '-', {
id : 'delNode',
text : '删除',
handler : function(tree) {
delNodeAction();
}
}, {
id : 'modifNode',
text : '修改',
handler : function() {
modifNodeAction()
}
}, {
id : 'viewNode',
text : '查看',
handler : function(tree) {
veiwNodeAction();
}
}]
});
// 添加点击事件
tree.on('click', function(node) {
if (node.id != 'root') {
// alert(node.id);
alert('我是:' + node.text + ',我的id是' + node.id + '');
}
});
// 增加右键弹出事件
tree.on('contextmenu', function(node, event) {// 声明菜单类型
event.preventDefault();// 这行是必须的,使用preventDefault方法可防止浏览器的默认事件操作发生。
node.select();
rightClick.showAt(event.getXY());// 取得鼠标点击坐标,展示菜单
});
// 添加兄弟节点事件实现
function insertNode() {
var selectedNode = tree.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
var newNode = new Ext.tree.TreeNode({
text : '新建节点' + selectedNode.id
});
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
} else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
};
// 添加子节点事件实现
function appendNodeAction() {
var selectedNode = tree.getSelectionModel().getSelectedNode();
if (selectedNode.isLeaf()) {
selectedNode.leaf = false;
}
var newNode = selectedNode.appendChild(new Ext.tree.TreeNode({
text : '新建节点' + selectedNode.id
}));
newNode.parentNode.expand(true, true, function() {
tree.getSelectionModel().select(newNode);
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
});// 将上级树形展开
}
// 删除节点事件实现
function delNodeAction() {
var selectedNode = tree.getSelectionModel().getSelectedNode();
// 得到选中的节点
selectedNode.remove();
};
// 修改节点事件实现
function modifNodeAction() {
var selectedNode = tree.getSelectionModel().getSelectedNode();// 得到选中的节点
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
};
// 查看事件实现
function veiwNodeAction() {
var viewPanel = Ext.getCmp('tree-window-view');
var selectedNode = tree.getSelectionModel().getSelectedNode();
// 得到选中的节点
var tmpid = selectedNode.attributes.id;
var tmpname = selectedNode.attributes.text;
var tmpdes = selectedNode.attributes.des;
win.setTitle(tmpname + '的介绍');
win.show();
var dataObj = {
id : tmpid,
name : tmpname,
des : tmpdes
}
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>']);
tmpTpl.overwrite(viewPanel.body, dataObj);
};
});
- 功能强大的EXTJS的tree的节点操作
- Extjs中的tree节点的操作
- extjs可直接编辑节点的tree
- Extjs tree节点的点击事件
- extjs 根据tree的操作刷新grid
- 使用extjs的Tree组件时,节点ID设置问题
- Extjs tree 点击选中的节点 改变背景
- 让ExtJs的Tree节点支持图标字体
- extjs tree节点展开后无法关闭的问题
- extjs tree的使用
- 简单的extjs tree
- extjs - tree - 加载指定节点的方法(利用节点首次加载功能)
- 名副其实的cleanmymac 功能强大 操作简单
- extjs tree 的使用备忘
- ExtJs 一个简单的tree
- 在Iframe判断ExtJs tree控件选中的节点id并且传输到后台
- extjs+s2sh实现异步Tree的节点搜索和查找下一个(FindNext)
- jquery的tree增删改查节点操作
- JNI编程小结(一)
- ajax jquery 实现搜索 回调数据 全选 加反选
- JDK目录结构与结构图
- MFC中的框架结构 开发经常用到的关系
- 依赖属性基本注册方法
- 功能强大的EXTJS的tree的节点操作
- GNU编译工具
- 天朝须知
- ListView
- 【iframe框,全局跳转】从iframe中跳转,覆盖整个页面
- 内存分配策略(静态,栈式,堆式的比较)
- android实现联网小例子,刚学习与大家分享
- PLSQL导入导出数据库
- code::blocks10.05调试多线程报错解决办法