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

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

 

和上一章的代码比就多了crud和事件那一部分。

 

Ext.onReady(function(){Ext.BLANL_IMAGE_URL = "../../resources/image/default/s.gif",/* * 新增结点：一是成为一个子结点，二是成为一个兄弟结点。 * * appendChild() * * insertBefore() *//* * 删除结点：一个是自杀式，一个是父杀子。 * * remove() * * insertChild() *///创建简单的TreePanelExt.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]);//定义TreePanelvar 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();});