这一章和上一章不同的是，要对树的结点进行操作了，我只是看了看代码，并没有专心去做。所以效果图没出来，大家自己看看写写吧。明白大概思路就可以。
和上一章的代码比就多了crud和事件那一部分。
Ext.onReady(function(){
Ext.BLANL_IMAGE_URL = "../../resources/image/default/s.gif",
/*
* 新增结点：一是成为一个子结点，二是成为一个兄弟结点。
* * appendChild()
* * insertBefore()
*/
/*
* 删除结点：一个是自杀式，一个是父杀子。
* * remove()
* * insertChild()
*/
//创建简单的TreePanel
Ext.QuickTips.init();
//定义根结点
var root = new Ext.tree.TreeNode({id:1,checked:false,text:"根结点",iconCls:"me-iconCls"});
var level_1_1 = new Ext.tree.TreeNode({id:2,checked:false,text:"一级_1",iconCls:"me-iconCls"});
var level_1_2 = new Ext.tree.TreeNode({id:3,checked:false,text:"一级_2",iconCls:"me-iconCls"});
var level_1_1_1 = new Ext.tree.TreeNode({id:4,checked:true,text:"二级_1",iconCls:"me-iconCls"});
var level_1_1_2 = new Ext.tree.TreeNode({id:5,checked:true,text:"二级_2",iconCls:"me-iconCls"});
var level_1_1_3 = new Ext.tree.TreeNode({id:6,checked:true,text:"二级_3",iconCls:"me-iconCls"});
var level_1_1_3_1 = new Ext.tree.TreeNode({id:7,checked:true,text:"二级_3_1",iconCls:"me-iconCls"});
var level_1_1_3_2 = new Ext.tree.TreeNode({id:8,checked:true,text:"二级_3_2",iconCls:"me-iconCls"});
var level_1_1_3_3 = new Ext.tree.TreeNode({id:9,checked:true,text:"二级_3_3",iconCls:"me-iconCls"});
level_1_1.appendChild([level_1_1_1,level_1_1_2,level_1_1_3]);
level_1_1_3.appendChild([level_1_1_3_1,level_1_1_3_2,level_1_1_3_3]);
root.appendChild([level_1_1,level_1_2]);
//定义TreePanel
var tree = new Ext.tree.TreePanel({
width:200,
height:300,
title:"树",
/*
* DefaultSelectionModel只支持单选，如果要支持多选，必须将TreePanel的选择
* 模型换成Ext.tree.MultiSelectionModel下面的代码完成了该任务
*
*/
//支持多选的选择模型
selModel:new Ext.tree.MultiSelectionModel(),
lines:true,//显示连接线 false不显示连接线
bbar:[{
// icon:"";
cls:"x-btn-text-icon",
text:"上",
tooltip:"向上选择一个结点",
tooltipType:"qtip",
handler:function(){
var model = tree.getSelectionModel();//获取选择模型
model.selectPrevious();
}
},{
// icon:"";
cls:"x-btn-text-icon",
text:"下",
tooltip:"向下选择一个结点",
tooltipType:"qtip",
handler:function(){
var model = tree.getSelectionModel();//获取选择模型
model.selectNext();
}
},{
// icon:"";
cls:"x-btn-text-icon",
text:"值",
tooltip:"获取结点的值",
tooltipType:"qtip",
handler:function(){
var model = tree.getSelectionModel();//获取选择模型
var selectedNode = model.getSelectedNode();
if(selectedNode){
Ext.MessageBox.alert("",selectedNode.text);
}
}
},{
// icon:"";
cls:"x-btn-text-icon",
text:"选",
tooltip:"自定义选择任何结点",
tooltipType:"qtip",
handler:function(){
Ext.Msg.prompt("路径","请输入要选择的结点的路径",function(btn,txt){
if(btn == "ok"){
tree.selectPath(txt,"text");
}
});
}
},{
// icon:"";
cls:"x-btn-text-icon",
text:"ID",
tooltip:"根据ID进行选择",
tooltipType:"qtip",
handler:function(){
Ext.Msg.prompt("路径","请输入要选择的结点的路径",function(btn,txt){
if(btn == "ok"){
var model = tree.getSelectionModel();//获取选择模型
var selNode = tree.getNodeById(txt);//根据ID得到结点对象
model.select(selNode);
}
});
}
},{
text:"Selected",
// icon:"",
cls:"x-btn-text-icon",
tooltip:"输出所有被选中结点的值",
tooltipType:"qtip",
handler:function(){
var nodes = tree.getChecked();//获取所有结点
for(var i=0;i<nodes.length;i++){
alert(nodes[i].text);
}
}
},{
text:"Clear All",
// icon:"",
cls:"x-btn-text-icon",
tooltip:"清除",
tooltipType:"qtip",
handler:function(){
var nodes = tree.getChecked();//获取所有结点
var selModel = tree.getSelectionModel();
for(var i=0;i<nodes.length;i++){
nodes[i].ui.checkbox.checked = false; //被选中的结点取消
nodes[i].ui.onCheckChange();//与模型数据同步
}
}
},{
text:"Select All",
// icon:"",
cls:"x-btn-text-icon",
tooltip:"选择所有",
tooltipType:"qtip",
handler:function(){
tree.iteratorCheck(tree.getRootNode(),true);
}
}]
});
/**
* 触发复选框状态改变事件
*/
tree.on("checkchange",function(node){
var children = node.childNodes;
for(var i=0;i<children.length;i++){
children[i].ui.checkbox.checked = node.ui.checkbox.checked;
children[i].ui.onCheckChange();
}
});
/**
* 递归遍历所有结点
*/
tree.iteratorCheck = function(node,checked){
if(node.hasChildNodes()){
node.eachChild(function(currentNode){
tree.iteratorCheck(currentNode,checked);
});
}
node.ui.checkbox.checked = checked;
node.ui.onCheckChange();
}
/******************************结点的CRUD***********************************/
//增加新结点
sameLevelBefore = function(tree){
Ext.MessageBox.prompt("输入","请输入新结点的名称：",function(btn,txt){
if(btn == "ok"){
var newNode = new Ext.tree.TreeNode({text:txt}); //新结点
var selNode = tree.getSelectionModel().getSelectedNode();//选择的结点
if(!selNode){
Ext.Msg.alert("错误","在添加新结点之前请先选择参照结点");
}else if(selNode.id == tree.getRootNode().id){
Ext.Msg.alert("错误","在添加新结点之前请先选择参照结点");
}else{
//在同级结点之前添加结点
selNode.parentNode.insertBefore(newNode,selNode);
//在同级结点之后添加新结点
// selNode.parentNode.insertBefore(newNode,selNode.nextSibling);
//追加子结点 增加的结点默认不会展开
// selNode.appendChild(newNode);
//展开子结点
// selNode.expand();
//删除结点
// if(selNode.id == tree.getRootNode().id){
// Ext.Msg.alert("","根结点不能删除");
// }else{
// selNode.remove();
// }
//修改结点信息，为了修改结点我们必须使用TreeEditor，当然使用的方法非常简单
// var editor = new Ext.tree.TreeEditor(tree,{allowBlank:false})
}
}
});
}
/******************************结点的CRUD***********************************/
/******************************事件处理*******************************/
/*
* 添加，删除或者修改完毕结点信息后，可能最终要和数据库同步，这就需要用到ajax技术，
* 来完成，但更重要的是如何得到添加，删除和修改后的结点信息才是问题的关键，最直接的
* 办法是触发操作完成后的事件，在事件中使用ajax将修改结果传输到服务器
* appendChild()方法后触发TreePanel的append事件
* insertBefore()方法后触发insert事件
* remove()方法后触发remove时间爱你
* 修改了结点内容后出发complete事件
*
* 下面是基本代码
*/
editor.on("complete",function(editor,value,startValue){
alert("原值： "+startValue+",新值:"+value);
alert("被修改结点： "+editor.editNode);
});
tree.on("insert",function(tree,parent,node,refNode){
alert("inserted");
})
tree.on("remove",function(tree,parent,node){
alert("removed");
});
tree.on("append",function(tree,parent,node){
alert("appended");
})
/*
* 将事件回调函数中的参数大概说明一下：
* tree自然是treePanel
* parent是操作结点的父节点
* node是操作结点本身
* 而refNode是指参照结点
*/
/******************************事件处理*******************************/
tree.setRootNode(root);
tree.render("a");
tree.expandAll();
});
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
