js:
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 : 'scripts/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 treeEditer = 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);
};
});
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css"
href="D:/ext-2.2.1/resources/css/ext-all.css" target="_blank" rel="external nofollow" />
<script type="text/javascript"
src="D:/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="D:/ext-2.2.1/ext-all.js"></script>
<script type="text/javascript" src="./treelip.js"></script>
</head>
<div></div>
<body>
</body>
</html>
json:
[
{
"text":"卡卡西班",
"id":"01",
"allowDrag":false,
"des":"最強的組合！",
"children":[
{"text":"小櫻","id":"0101","allowDrag":false,"des":"一個很可愛的女孩！","children":[
{"text":"小櫻1","id":"010101","leaf":true,"allowDrag":true,"des":"一個很可愛的女孩！"},
{"text":"鳴人1","id":"010202","leaf":true,"allowDrag":true,"des":"四代火影的兒子！"},
{"text":"佐助1","id":"010303","leaf":true,"allowDrag":true,"des":"為了殺自己哥哥而活着的男人！"}
]
},
{"text":"鳴人","id":"0102","leaf":true,"allowDrag":true,"des":"四代火影的兒子！"},
{"text":"佐助","id":"0103","leaf":true,"allowDrag":true,"des":"為了殺自己哥哥而活着的男人！"}
]
},
{
"text":"凱班",
"id":"02",
"allowDrag":false,
"des":"有一個很白癡的老師！",
"children":[
{"text":"小李","id":"0201","leaf":true,"allowDrag":true,"des":"他的努力意識值得任何人學習！"},
{"text":"甯次","id":"0202","leaf":true,"allowDrag":true,"des":"白眼族的天才忍者！"},
{"text":"天天","id":"0203","leaf":true,"allowDrag":true,"des":"她救活了一個暗器公司！"}
]
}
]
本文來自CSDN部落格，轉載請标明出處：http://blog.csdn.net/lipeng_nii/archive/2009/02/18/3905450.aspx
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)