Extjs学习总结之24treePanel

树状结构是extjs一个非常有实用价值的组件，在web应用开发中树肯定会有。树的相关操作是一定要会哦。看看extjs的tree吧。

 

treepanel.js:

Ext.onReady(function(){Ext.BLANL_IMAGE_URL = "../../resources/image/default/s.gif",/* * 树是由一个一个节点组成，树有唯一的根节点。树的节点分成三种： * 根结点，叶子结点和非叶子结点。这些结点的名称虽然不同，但他们 * 的类型都是一样的，都是treeNode，根结点唯一，叶子结点没有子 * 结点，但有唯一的父结点；非叶子结点有一个父结点和若干个子结点。 *//* * getNodeById(String id) :Node根据ID找到节点对象，如果没有设置结点ID， * Ext会为结点自动生成一个，不过我们将无法控制，最好为每一个结点指定一个ID *  * getRootNode():获取根结点 * getSelectionModel():TreeSelctionModel得到TreePanel的选择模型 *///创建简单的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();}tree.setRootNode(root);tree.render("a");tree.expandAll();});

效果图：