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] )：重新加载节点数据，并调用回调函数 
  • 相关阅读:
    HDU 2433 Travel （最短路，BFS，变形）
    HDU 2544 最短路 （最短路，spfa）
    HDU 2063 过山车 （最大匹配，匈牙利算法）
    HDU 1150 Machine Schedule (最小覆盖，匈牙利算法)
    290 Word Pattern 单词模式
    289 Game of Life 生命的游戏
    287 Find the Duplicate Number 寻找重复数
    283 Move Zeroes 移动零
    282 Expression Add Operators 给表达式添加运算符
    279 Perfect Squares 完美平方数
  • 原文地址：https://www.cnblogs.com/pureEve/p/6567282.html
Copyright © 2011-2022 走看看