Extjs树的各种玩法案例

最新推荐文章于 2023-03-30 11:56:48 发布

疯了的晓猿

最新推荐文章于 2023-03-30 11:56:48 发布

阅读量451

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本案例中记载了Extjs中一棵树的形成以及各种案例集成，并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的，整理出来，方便以后查看。

JSP页面：

[html]view plain copy 
   
 <%@ page contentType="text/html;charset=UTF-8" %>  
 <%@ include file="/WEB-INF/views/include/taglib.jsp"%>  
 <html>  
 <head>  
     <title>区域管理</title>  
       
     <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/resources/css/ext-all.css" />  
     <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/ux/treegrid/treegrid.css" />  
   
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ext-all.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid.js"></script>  
       
     <script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>  
     <script type="text/javascript" src="${ctxStatic}/js/srcs/srcs-treegrid.js"></script>  
     <script type="text/javascript">  
         //项目根目录地址  
         var ctxStatic = '${ctxStatic}';  
     </script>  
 </head>  
 <body>  
     <div id="container"></div>  
 </body>  
 </html>  

js页面：

[javascript]view plain copy 
   
 Ext.onReady(function() {  
     // 初始化节点提示qtip  
     Ext.QuickTips.init();  
     // 定义一个根节点  
     var root = new Ext.tree.TreeNode({  
         id : 'root',  
         text : '树根',  
         checked : true,  
         qtip : '我是树根'  
     });  
     // 定义一个树叶或者枝  
     var leaf1 = new Ext.tree.TreeNode({  
         id : "leaf1",  
         text : '我是树叶1',  
         checked : true,  
         qtip : '我是树叶'  
     });  
     var leaf2 = new Ext.tree.TreeNode({  
         id : "leaf2",  
         text : '我是树枝2',  
         checked : true,  
         qtip : '我是树枝'  
     });  
     var leaf3 = new Ext.tree.TreeNode({  
         id : "leaf3",  
         text : '我是树叶3',  
         href : 'http://www.baidu.com',  
         checked : true,  
         qtip : '我是树叶'  
     });  
     var leaf4 = new Ext.tree.TreeNode({  
         id : "leaf4",  
         text : '我是树枝4',  
         checked : true,  
         qtip : '我是树枝'  
     });  
     var leaf5 = new Ext.tree.TreeNode({  
         id : "leaf5",  
         text : '我是树叶5',  
         checked : true,  
         qtip : '我是树叶'  
     });  
     var leaf6 = new Ext.tree.TreeNode({  
         id : "leaf6",  
         text : '我是树叶4',  
         checked : true,  
         qtip : '我是树叶'  
     });  
     root.appendChild(leaf1);  
     root.appendChild(leaf2);  
     leaf2.appendChild(leaf3);  
     leaf2.appendChild(leaf4);  
     leaf4.appendChild(leaf5);  
     leaf4.appendChild(leaf6);  
   
   
     // 定义一个菜单  
     // var contextMenu = new Ext.menu.Menu({ items : [(  
     // ),( )] }); contextMenu.showAt(event.getXY());  
     // tree.on('contextmenu',treeContextHandler);  
     //     
     //    
     // var root = new Ext.tree.AsyncTreeNode({ text:'i am a root', id:'root',  
     // children:[{ text:'node1',leaf:true },{ text:'node2',leaf:true },{  
     // text:'node3',leaf:true }] }); var loader = new Ext.tree.TreeLoader();  
   
   
     // 定义一棵树  
     var tree = new Ext.tree.TreePanel({  
         renderTo : 'container',  
         // loader : loader,  
         root : root,  
         title : '我是一颗小小树',// 树标题  
         collapsible : true,// 树形是否有缩放功能  
         autoHeight : true,// 自动高度，默认false  
         animate : true,// 展开动画  
         enableDrag : true,// 是否可以拖动(效果上)  
         enableDD : true,// 不进可以拖动，还可以改变节点层次结构  
         enableDrop : false,// 仅仅drop  
         lines : true,// 节点间的虚线条是否显示  
         rootVisible : true,// 是否显示根节点，默认true  
         userArrows : true,// 是否显示小箭头  
         // autoScroll : true,//是否显示滚动条  
         // height : 150,  
         width : 200  
   
   
     });  
     // 第一个参数为true，展开所有节点，false只展开一级。第二个参数为true，慢慢展开，显示展开，false，则不显示过程  
     root.expand(false, true);  
     // 编写树节点的单击事件  
     tree.on('click', function(node, event) {  
         // Ext.Msg.alert("信息提示","you clicked me！");  
         Ext.Msg.show({  
             title : '信息提示',  
             msg : node.text,  
             animEl : node.ui.textNode  
         });  
         // 为节点修改样式  
         var ui = node.ui;  
         ui.hide();  
         (function() {  
             ui.show();  
         }).defer(2000);  
         // ui.addClass("big");  
         // (  
         // function(){  
         // ui.removeClass("big");  
         // }  
         // ).defer(5000);  
         // 删除选中的节点  
         // tree.getSelectionModel().getSelectedNode().remove();  
     });  
     // 编写树节点的双击事件  
     tree.on('dblclick', function(node, event) {  
         Ext.Msg.alert("信息提示", "you clicked me twice！");  
     });  
     // 编辑树节点的拖放事件  
     tree.on('nodedrop', function(event) {  
         Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'  
                 + event.target.text + '上，掉落的方式是' + event.point);  
         switch (event.point) {  
         case 'append':  
             Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '变成了'  
                     + event.target.text + '子节点');  
             break;  
         case 'above':  
             Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'  
                     + event.target.text + '和'  
                     + event.target.previousSibling.text + '之间');  
             break;  
         case 'below':  
             Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'  
                     + event.dropNode.previousSibling.text + '和'  
                     + event.target.nextSibling.text + '之间');  
             break;  
         }  
     })  
   
   
     // 对树节点进行排序的工具  
     // new Ext.tree.TreeSorter(tree,{folderSort:true,dir:desc,property:'text'});  
   
   
     // //编写树节点的双击事件 tree.on('expandnode',function(node,event){  
     // Ext.Msg.alert("信息提示","expandnode！"); }); //编写树节点的双击事件  
     // tree.on('collapsenode',function(node,event){  
     // Ext.Msg.alert("信息提示","collapsenode！"); });  
   
   
     var root2 = new Ext.tree.TreeNode({  
         id : 'root2',  
         text : '树根2',  
         qtip : '我是树根2'  
     });  
     var tree2 = new Ext.tree.TreePanel({  
         renderTo : 'container',  
         root : root2,  
         enableDrop : true,  
         // enableDrag:true,  
         title : '我是一颗小小草',  
         collapsible : true,  
         width : 200  
     });  
     root2.expand();  
   
   
 });  

一、Ext.tree.TreePanel

      主要配置项：
            root：树的根节点。
            rootVisible：是否显示根节点，默认为true。
            useArrows：是否在树中使用Vista样式箭头，默认为false。
            lines：是否显示树线，默认为true。
            loader：树节点的加载器，默认为Ext.tree.TreeLoader。
            selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。
            pathSeparator：树节点路径的分隔符，默认为“/”。
            singleExpand：是否一次只展开树中的一个节点，默认为true。
            requestMethod：请求方法，可选值有POST、GET。
            containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。

      主要方法：
            collapseAll()：收缩所有树节点
            expandAll()：展开所有树节点
            getRootNode()：获取根节点
            getNodeById(String id)：获取指定id的节点
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展开panel的body以便让其变得可见
            expandPath( String path, [String attr], [Function callback] )展开当前TreePanel中的指定路径
            getChecked( [String attribute], [TreeNode startNode] )获得选中的节点列表，或者被选中节点的某个指定的属性数组
            selectPath( String path, [String attr], [Function callback] ) 从树中选中所给路径的节点
            getSelectionModel()：返回此TreePanel使用的选择模型

二、Ext.tree.TreeNode
      主要配置项：
            text：节点上的文本信息
            qtip：节点上的提示信息
            icon：节点图标对应的路径
            iconCls：应用到节点图标上的样式
            checked：当前节点的选择状态
                  true：在节点前显示一个选中状态的复选框
                  false：在节点前显示一个未选中状态的复选框
                  不指定该值：不显示任何复选框
            href：节点的连接属性，默认为#
            hrefTarget：显示节点连接的目标框架
            editable：是否允许编辑，默认为true
            expanded：是否展开节点，默认为false
            disabled：是否禁用节点，默认为false
            singleClickExpand：是否通过单击方式展开节点
            allowChildren：是否允许当前节点具有子节点，默认为true
            expandable：当不含子节点时，是否总显示一个加减图标，默认为false
            uiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI

      主要属性：
            text：节点上的文本信息
            disabled：当前节点是否被禁用

      主要方法：
            collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点
            deep：是否级联收缩全部子节点
            collapseChildNodes( [Boolean deep] )：收缩所有子节点
            disable()：禁用当前节点
            enable()：启用当前节点
            ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点
            expandChildNodes( [Boolean deep] )：展开所有子节点
            isExpanded()：当前节点是否展开
            isSelected()：当前节点是否被选中
            select()：选择当前节点
            setText( String text )：设置当前的文本
            toggle()：切换当前节点的展开和收缩状态
            unselect()：取消对当前节点的选择
            getUI()：取得节点的UI对象

三、Ext.tree.AsyncTreeNode
      主要配置项：
            loader：当前节点的树加载器，默认使用树中配置的树加载器

      主要方法：
            isLoaded()：当前节点是否已经加载数据
            reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数

作者：伫望碧落出处：http://blog.csdn.net/cl05300629

疯了的晓猿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Extjs树的各种玩法案例

本案例中记载了Extjs中一棵树的形成以及各种案例集成，并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的，整理出来，方便以后查看。JSP页面：[html] view plain copy%@ page contentType="text/html;charset=UTF
复制链接

扫一扫