zoukankan      html  css  js  c++  java

  • Extjs tree2

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

    JSP页面：

    [html] view plain copy
     
    1. <%@ page contentType="text/html;charset=UTF-8" %>  
    2. <%@ include file="/WEB-INF/views/include/taglib.jsp"%>  
    3. <html>  
    4. <head>  
    5.     <title>区域管理</title>  
    6.       
    7.     <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/resources/css/ext-all.css" />  
    8.     <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/ux/treegrid/treegrid.css" />  
    9.   
    10.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"></script>  
    11.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ext-all.js"></script>  
    12.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter.js"></script>  
    13.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer.js"></script>  
    14.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI.js"></script>  
    15.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader.js"></script>  
    16.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns.js"></script>  
    17.     <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid.js"></script>  
    18.       
    19.     <script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>  
    20.     <script type="text/javascript" src="${ctxStatic}/js/srcs/srcs-treegrid.js"></script>  
    21.     <script type="text/javascript">  
    22.         //项目根目录地址  
    23.         var ctxStatic = '${ctxStatic}';  
    24.     </script>  
    25. </head>  
    26. <body>  
    27.     <div id="container"></div>  
    28. </body>  
    29. </html>  

    js页面：

    [javascript] view plain copy
     
    1. Ext.onReady(function() {  
    2.     // 初始化节点提示qtip  
    3.     Ext.QuickTips.init();  
    4.     // 定义一个根节点  
    5.     var root = new Ext.tree.TreeNode({  
    6.         id : 'root',  
    7.         text : '树根',  
    8.         checked : true,  
    9.         qtip : '我是树根'  
    10.     });  
    11.     // 定义一个树叶或者枝  
    12.     var leaf1 = new Ext.tree.TreeNode({  
    13.         id : "leaf1",  
    14.         text : '我是树叶1',  
    15.         checked : true,  
    16.         qtip : '我是树叶'  
    17.     });  
    18.     var leaf2 = new Ext.tree.TreeNode({  
    19.         id : "leaf2",  
    20.         text : '我是树枝2',  
    21.         checked : true,  
    22.         qtip : '我是树枝'  
    23.     });  
    24.     var leaf3 = new Ext.tree.TreeNode({  
    25.         id : "leaf3",  
    26.         text : '我是树叶3',  
    27.         href : 'http://www.baidu.com',  
    28.         checked : true,  
    29.         qtip : '我是树叶'  
    30.     });  
    31.     var leaf4 = new Ext.tree.TreeNode({  
    32.         id : "leaf4",  
    33.         text : '我是树枝4',  
    34.         checked : true,  
    35.         qtip : '我是树枝'  
    36.     });  
    37.     var leaf5 = new Ext.tree.TreeNode({  
    38.         id : "leaf5",  
    39.         text : '我是树叶5',  
    40.         checked : true,  
    41.         qtip : '我是树叶'  
    42.     });  
    43.     var leaf6 = new Ext.tree.TreeNode({  
    44.         id : "leaf6",  
    45.         text : '我是树叶4',  
    46.         checked : true,  
    47.         qtip : '我是树叶'  
    48.     });  
    49.     root.appendChild(leaf1);  
    50.     root.appendChild(leaf2);  
    51.     leaf2.appendChild(leaf3);  
    52.     leaf2.appendChild(leaf4);  
    53.     leaf4.appendChild(leaf5);  
    54.     leaf4.appendChild(leaf6);  
    55.   
    56.   
    57.     // 定义一个菜单  
    58.     // var contextMenu = new Ext.menu.Menu({ items : [(  
    59.     // ),( )] }); contextMenu.showAt(event.getXY());  
    60.     // tree.on('contextmenu',treeContextHandler);  
    61.     //     
    62.     //    
    63.     // var root = new Ext.tree.AsyncTreeNode({ text:'i am a root', id:'root',  
    64.     // children:[{ text:'node1',leaf:true },{ text:'node2',leaf:true },{  
    65.     // text:'node3',leaf:true }] }); var loader = new Ext.tree.TreeLoader();  
    66.   
    67.   
    68.     // 定义一棵树  
    69.     var tree = new Ext.tree.TreePanel({  
    70.         renderTo : 'container',  
    71.         // loader : loader,  
    72.         root : root,  
    73.         title : '我是一颗小小树',// 树标题  
    74.         collapsible : true,// 树形是否有缩放功能  
    75.         autoHeight : true,// 自动高度，默认false  
    76.         animate : true,// 展开动画  
    77.         enableDrag : true,// 是否可以拖动(效果上)  
    78.         enableDD : true,// 不进可以拖动，还可以改变节点层次结构  
    79.         enableDrop : false,// 仅仅drop  
    80.         lines : true,// 节点间的虚线条是否显示  
    81.         rootVisible : true,// 是否显示根节点，默认true  
    82.         userArrows : true,// 是否显示小箭头  
    83.         // autoScroll : true,//是否显示滚动条  
    84.         // height : 150,  
    85.         width : 200  
    86.   
    87.   
    88.     });  
    89.     // 第一个参数为true，展开所有节点，false只展开一级。第二个参数为true，慢慢展开，显示展开，false，则不显示过程  
    90.     root.expand(false, true);  
    91.     // 编写树节点的单击事件  
    92.     tree.on('click', function(node, event) {  
    93.         // Ext.Msg.alert("信息提示","you clicked me！");  
    94.         Ext.Msg.show({  
    95.             title : '信息提示',  
    96.             msg : node.text,  
    97.             animEl : node.ui.textNode  
    98.         });  
    99.         // 为节点修改样式  
    100.         var ui = node.ui;  
    101.         ui.hide();  
    102.         (function() {  
    103.             ui.show();  
    104.         }).defer(2000);  
    105.         // ui.addClass("big");  
    106.         // (  
    107.         // function(){  
    108.         // ui.removeClass("big");  
    109.         // }  
    110.         // ).defer(5000);  
    111.         // 删除选中的节点  
    112.         // tree.getSelectionModel().getSelectedNode().remove();  
    113.     });  
    114.     // 编写树节点的双击事件  
    115.     tree.on('dblclick', function(node, event) {  
    116.         Ext.Msg.alert("信息提示", "you clicked me twice！");  
    117.     });  
    118.     // 编辑树节点的拖放事件  
    119.     tree.on('nodedrop', function(event) {  
    120.         Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'  
    121.                 + event.target.text + '上，掉落的方式是' + event.point);  
    122.         switch (event.point) {  
    123.         case 'append':  
    124.             Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '变成了'  
    125.                     + event.target.text + '子节点');  
    126.             break;  
    127.         case 'above':  
    128.             Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'  
    129.                     + event.target.text + '和'  
    130.                     + event.target.previousSibling.text + '之间');  
    131.             break;  
    132.         case 'below':  
    133.             Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'  
    134.                     + event.dropNode.previousSibling.text + '和'  
    135.                     + event.target.nextSibling.text + '之间');  
    136.             break;  
    137.         }  
    138.     })  
    139.   
    140.   
    141.     // 对树节点进行排序的工具  
    142.     // new Ext.tree.TreeSorter(tree,{folderSort:true,dir:desc,property:'text'});  
    143.   
    144.   
    145.     // //编写树节点的双击事件 tree.on('expandnode',function(node,event){  
    146.     // Ext.Msg.alert("信息提示","expandnode！"); }); //编写树节点的双击事件  
    147.     // tree.on('collapsenode',function(node,event){  
    148.     // Ext.Msg.alert("信息提示","collapsenode！"); });  
    149.   
    150.   
    151.     var root2 = new Ext.tree.TreeNode({  
    152.         id : 'root2',  
    153.         text : '树根2',  
    154.         qtip : '我是树根2'  
    155.     });  
    156.     var tree2 = new Ext.tree.TreePanel({  
    157.         renderTo : 'container',  
    158.         root : root2,  
    159.         enableDrop : true,  
    160.         // enableDrag:true,  
    161.         title : '我是一颗小小草',  
    162.         collapsible : true,  
    163.         width : 200  
    164.     });  
    165.     root2.expand();  
    166.   
    167.   
    168. });  


    一、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] )：重新加载节点数据，并调用回调函数 
  • 相关阅读:
    汉诺塔问题
    两个有序链表序列的合并
    数列求和
    求集合数据的均方差
    [NOIP2014] 提高组 洛谷P1328 生活大爆炸版石头剪刀布
    [NOIP2014] 普及组
    洛谷P1726 上白泽慧音
    洛谷P1808 单词分类
    洛谷P1889 士兵站队
    洛谷P1288 取数游戏II
  • 原文地址：https://www.cnblogs.com/pureEve/p/6567282.html
Copyright © 2011-2022 走看看