Extjs学习总结之25树结点操作

时间：2021-02-13 19:54:19

这一章和上一章不同的是，要对树的结点进行操作了，我只是看了看代码，并没有专心去做。所以效果图没出来，大家自己看看写写吧。明白大概思路就可以。

 

和上一章的代码比就多了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();


});


 

标签：

相关文章