ext树

于 2016-12-13 10:42:47 发布
阅读量711 收藏 1
点赞数
分类专栏： extjs 文章标签： ext 
[javascript] view plain copy

    <script type="text/javascript">  
            Ext.onReady(function()  
                {  
                    //树形结构  
                    //创建一棵树：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上  
                    );  
                    //创建根节点：  
                    var root = new Ext.tree.TreeNode({text:'山东'});  
                    tree.setRootNode(root);//把根节点添加到树中  
                    tree.render();//对树进行渲染   
                    //添加枝叶  
                    var node1 = new Ext.tree.TreeNode({text:'济南'});  
                    var node11 = new Ext.tree.TreeNode({text:'市中区'});  
                    var node12 = new Ext.tree.TreeNode({text:'章丘市'});  
                    var node2 = new Ext.tree.TreeNode({text:'青岛'});  
                    var node21 = new Ext.tree.TreeNode({text:'黄岛区'});  
                    var node22 = new Ext.tree.TreeNode({text:'城阳区'});  
                    var node3 = new Ext.tree.TreeNode({text:'淄博'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源'});  
                    var node32 = new Ext.tree.TreeNode({text:'张店'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山'});  

                    root.appendChild(node1);  
                    root.appendChild(node2);  
                    root.appendChild(node3);  

                    node1.appendChild(node11);  
                    node1.appendChild(node12);  

                    node2.appendChild(node21);  
                    node2.appendChild(node22);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  

                    root.expand(true,true);//加载后立即展开树  
                }  
            );  
        </script>

这里写图片描述

<2>使用TreeLoader加载数据：

[javascript] view plain copy

    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=GB2312">  
            <title>Tree</title>  
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />  
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
            <script type="text/javascript" src="../../ext-all.js"></script>  
            <script type="text/javascript" src="localXHR.js"></script>  
            <script type="text/javascript">  
                Ext.onReady(function(){  
                    var tree = new Ext.tree.TreePanel(  
                        {  
                            el: 'tree',  
                            //TreeLoader完成数据转换和装配节点的功能  
                            loader: new Ext.tree.TreeLoader({dataUrl: '03-03.txt'})  
                        }  
                    );  
                    //Ext.tree.TreeNode换成Ext.tree.AsyncTreeNode实现异步加载效果  
                    var root = new Ext.tree.AsyncTreeNode({text:'CHINA'});   
                    tree.setRootNode(root);  
                    tree.render();  
                    //只展开第一层节点  
                    root.expand();  
                    //展开全部节点  
                    //root.expand(true,true);  
                }  
            );  
            </script>  
        </head>  
        <body>  
            <script type="text/javascript" src="../shared/examples.js"></script>  
            <div id="tree" style="height:300px;"></div>  
        </body>  
    </html>

03-03.txt

[javascript] view plain copy

    [  
        {  
            text:'SHANDONG',  
            children:[  
                {text:'QINGDAO',leaf:true},  
                {  
                    text:'ZIBO',  
                    children:[  
                        {text:'ZHANGDIAN',leaf:true},  
                        {text:'YIYUAN',leaf:true}  
                    ]  
                },  
                {text:'JINAN',leaf:true}  
            ]  
        },  
        {text:'BEIJING',leaf:true}  
    ]

注意：

下载localXHR.js：点击打开链接

这里写图片描述
<3>树的事件

[javascript] view plain copy

    //添加事件监听机制  
                    tree.on("expandnode",function(node){  
                        Ext.Msg.alert(node + "展开了");  
                    });  
                    tree.on("collapsenode",function(node){  
                        Ext.Msg.alert(node + "折叠了");  
                    });  
                    tree.on("click",function(node){  
                        Ext.Msg.alert("你单击了" + node);  
                    });  
                    tree.on("dblclick",function(node){  
                        Ext.Msg.alert("你双击了" + node);  
                    });

alert() 无法触发双击事件。

这里写图片描述
<4>右键菜单

[javascript] view plain copy

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
        <title>Ext Buttons</title>  
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../ext-all.js"></script>  
        <script type="text/javascript" src="../examples.js"></script>  
        <script type="text/javascript">  
            Ext.onReady(function()  
                {  
                    //树形结构  
                    //创建一棵树：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上  
                    );  
                    //创建根节点：  
                    var root = new Ext.tree.TreeNode({text:'山东'});  
                    tree.setRootNode(root);//把根节点添加到树中  
                    tree.render();//对树进行渲染   
                    //添加枝叶  
                    var node1 = new Ext.tree.TreeNode({text:'济南'});  
                    var node11 = new Ext.tree.TreeNode({text:'市中区'});  
                    var node12 = new Ext.tree.TreeNode({text:'章丘市'});  
                    var node2 = new Ext.tree.TreeNode({text:'青岛'});  
                    var node21 = new Ext.tree.TreeNode({text:'黄岛区'});  
                    var node22 = new Ext.tree.TreeNode({text:'城阳区'});  
                    var node3 = new Ext.tree.TreeNode({text:'淄博'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源'});  
                    var node32 = new Ext.tree.TreeNode({text:'张店'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山'});  

                    root.appendChild(node1);  
                    root.appendChild(node2);  
                    root.appendChild(node3);  

                    node1.appendChild(node11);  
                    node1.appendChild(node12);  

                    node2.appendChild(node21);  
                    node2.appendChild(node22);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  
                    //<1>制作自定义菜单  
                    var contextmenu = new Ext.menu.Menu(  
                        {  
                            id:'theContextMenu',  
                            items:[  
                                {  
                                    text:'添加',  
                                    handler:function(){  
                                        alert("还未实现添加功能");  
                                    }  
                                },  
                                {  
                                    text:'删除',  
                                    handler:function(){  
                                        alert("还未实现删除功能");  
                                    }  
                                },  
                                {  
                                    text:'修改',  
                                    handler:function(){  
                                        alert("还未实现修改功能");  
                                    }  
                                }  
                            ]  
                        }  
                    );  
                    //<2>绑定contextMenu事件  
                    tree.on('contextMenu',function(node,e){  
                        //防止浏览器弹出他默认的功能菜单  
                        e.preventDefault();  
                        //选中当前节点  
                        node.select();  
                        //在点击的位置弹出菜单  
                        contextmenu.showAt(e.getXY());  
                    });  
                }  
            );  
        </script>  
    </head>  
    <body>  
        <div id = "tree">  
        </div>  
    </body>  
    </html>

这里写图片描述

<5>修改节点的默认图标

[javascript] view plain copy

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
        <title>Ext Buttons</title>  
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../ext-all.js"></script>  
        <script type="text/javascript" src="../examples.js"></script>  
        <style type="text/css">  
            .x-tree-node-leaf .icon-male {  
                background-image: url(user_male.png)  
        }  
        </style>  
        <script type="text/javascript">  
            /* 
                每个树形结点都有icon和iconCls属性，他们负责指定结点的图标。 
                <1>使用icon属性： 
                    var node = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'}); 
                <2>使用iconCls属性，我们还需要在HTML中添加对应的CSS定义。 
                    var node = new Ext.tree.TreeNode({text:'淄博',iconCls:'icon-male'}); 
                    <style type="text/css"> 
                        .x-tree-node-leaf .icon-male { 
                            background-image: url(user_male.png) 
                    } 
                    注意：x-tree-node-leaf .icon-male和代码中iconCls:'icon-male'相对应。 

        </style> 
            */  
            Ext.onReady(function()  
                {  
                    //树形结构  
                    //创建一棵树：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上  
                    );  
                    //创建根节点：  
                    var root = new Ext.tree.TreeNode({text:'山东',icon:'user_male.png'});  
                    tree.setRootNode(root);//把根节点添加到树中  
                    tree.render();//对树进行渲染   
                    //添加枝叶  
                    var node3 = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源',icon:'user_female.png'});  
                    var node32 = new Ext.tree.TreeNode({text:'张店',icon:'user_female.png'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山',iconCls:'icon-male'});  

                    root.appendChild(node3);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  
                }  
            );  
        </script>  
    </head>  
    <body>  
        <div id = "tree">  
        </div>  
    </body>  
    </html>

这里写图片描述

<6>从节点弹出对话框

[javascript] view plain copy

    tree.on('click',function(node){  
                        Ext.Msg.show(  
                            {  
                                title:'提示',  
                                msg:'你点击了'+node,  
                                animEl:node.ui.textNode  
                            }  
                        );  
                    });

这里写图片描述

<7>节点提示信息

[javascript] view plain copy

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
        <title>Ext Buttons</title>  
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../ext-all.js"></script>  
        <script type="text/javascript" src="../examples.js"></script>  
        <script type="text/javascript">  

            /* 
                为每个节点添加qtip:'xxxx'属性。 
                在JavaScript中对Ext的提示功能进行初始化。Ext.QuickTips.init(); 
            */  
            Ext.onReady(function()  
                {  
                    Ext.QuickTips.init();  
                    //树形结构  
                    //创建一棵树：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上  
                    );  
                    //创建根节点：  
                    var root = new Ext.tree.TreeNode({text:'山东'});  
                    tree.setRootNode(root);//把根节点添加到树中  
                    tree.render();//对树进行渲染   
                    //添加枝叶  
                    var node3 = new Ext.tree.TreeNode({text:'淄博',qtip:'中国历史文化名城，国家园林城市，中国瓷都。历史文化源远流长，曾作为山东政治中心近两千年，有“齐国故都”之称'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源',qtip:'沂源县是山东古人类发源地、山东屋脊生态高地、中国北方溶洞之乡和牛郎织女之乡'});  
                    var node32 = new Ext.tree.TreeNode({text:'张店'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山'});  

                    root.appendChild(node3);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  
                }  
            );  
        </script>  
    </head>  
    <body>  
        <div id = "tree">  
        </div>  
    </body>  
    </html>

这里写图片描述

<8>为节点设置超链接

[javascript] view plain copy

    var node32 = new Ext.tree.TreeNode({text:'张店',href:'tree事件监听.html',hrefTarget:'_blank'});

<9>直接修改树节点名称

[javascript] view plain copy

    //只要创建一个TreeEditor，再把TreePanel放进去就可以了。  
                    var treeEditor = new Ext.tree.TreeEditor(tree,{  
                        allowBlank:false  
                    });

这里写图片描述

ext js 下拉树
04-09
ext js 下拉树 真正可执行 包括引入的js和css
Ext树例子
01-31
它提供了丰富的UI组件，包括我们今天要讨论的主题——“Ext树例子”。Ext树（Tree）是一种数据结构，它呈现为层次化的节点集合，常用于展示具有层级关系的数据。在本篇文章中，我们将深入探讨Ext树的基本概念、其...
Ext的tree
下雨天的程序生活专栏
09-22 961
 YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤；1.定义一个Tree对象：var tree = new Ext.tree.TreePanel(tree, {                  animate:true,                   loader: new Ext.tree
Ext 树操作
{ focus : web }
11-10 122
 后台 树 节点 定义 menu_info { menu_id (0x500), // 本id menu_parent_id (0x501), //父亲id menu_title (0x502), menu_action (0x503), menu_nextId (0x504), //兄弟id menu_isleaf (0x507), // 是否叶子节点 m...
ext 树
hanweiisjerry1的专栏
06-18 170
[color=blue][size=medium][size=medium]3.1. 真的，我是为了树，才开始学ext的。 之前使用过xtree和dojo中的tree，感觉都是怪怪的，界面简陋，功能也不好上手，待看到ext里的树形真是眼前一亮，在此之前，动态增 添，修改删除节点，拖拽和右键菜单，我一直认为是不可能实现的任务，而在ext上却轻松实现了，而且界面和动画效果相当完美。真是让人爱...
EXT 树
兰染
03-30 1121
最近项目做完了 没事 就来学习学习EXT JS   ，不过 大部分代码是从网上copy 过来 学习的  我最先学会的就是建树了 ，EXT JS 很强大 ，不过看的我头也大了，能建个树我就很高兴了，以后基础知识慢慢学习吧 ，最主要是能看见效果出来 先建个tree.jsp内容如下： My JSP 'tree.jsp' starting page
静态ext树
03-24
在IT行业中，静态EXT树是一种特定的数据结构，主要用于优化数据访问和存储，特别是在处理大量静态数据时。这个概念源于Java编程语言，与源码解析、编译和优化有关。在这个场景下，"静态EXT树"可能是指一种优化过的...
Ext动态树详解
weixin_30323961的博客
05-18 119
最近在学习Ext，在园子里也看了好多别人的文章，今天自己动手来实现一个动态树。首先先看效果图吧 效果就如上面所示，接下来一步一步来实现吧！代码只贴关键部分！ 第一 数据库表的设计 还是请大家看图 很简单的表，就不说了。 第二 数据层用Linq 文件是：TreeLinqAccess 代码 public List<...
Ext树-构建
12-22 109
构建Ext 树，总的说来（我自己的经验）有两种 一种是dom拼接，另外种是是给树制定一个节点加载器，可以用来从服务器端动态加载树的节点信息   先来看看 dom拼接： Ext.onReady(function() { var root = new Ext.tree.TreeNode({ id : "root", text : "树的根" })...
EXT树
zhb200621的专栏
03-29 312
<br />http://www.blogjava.net/wangbing/archive/2010/01/03/308071.html
ExtJs树例子
03-21
NULL 博文链接：https://penghuaiyi.iteye.com/blog/951782
构建EXT树
niuxudong1的专栏
07-30 328
Ext.onReady(function(){ var mytree = new Ext.tree.TreePanel({          el : "container",          animate : true, 　　　title:"可增删改的树tree
Ext 权限树
ws_hgo的专栏
12-03 4353
Ext 权限树
EXT树的实现
pacer123
07-17 138
       项目中用到了书目录管理，需要做成树状结构的管理。下面将部分有用代码写出来，希望能给需要用到的人一些小小的帮助。项目中应用struts2+spring+ext。下面简要介绍几个步骤：        1、前台extjs的展现代码：              xinli.ui.SmsCatalogTreePanel = Ext.extend(Ext.tree.TreePanel, { ...
Ext树形结构——TreePanel
Donny的专栏
12-26 733
创建一个树 树控件由Ext.tree.TreePanel类定义，控件名称为treepanel，继承自Panel面板。 要实现一棵树也很简单： 1.创建一个TreePanel 2.为TreePanel设置一个根结点（RootNode） 3.添加子节点（TreeNode）到根几点。 示例： Ext.BLANK_IMAGE_URL = '../../resources/images/de...
Extjs静态树
爱吃鱼油
07-11 1643
extjs 静态树
ExtJS树的使用
蔡世友-重出江湖
01-10 4666
　　这是一个ExtJS实现的树展示，后台使用的EJS构架，因此向大家推荐，内容转自willamRaym的blog。　　 最近在学习ExtJS，发现其服务器端是php，这一点对我们搞java的有点不厚道啊。昨天学习了ExtJS的树，并做了一棵异步更新的树出来，后台的业务逻辑及持久层使用JPA+Spring2.5实现，发下面把步骤贴出来与大家分享。　　 首先准备树的域模型，下面是一地区的域
部门关系的ext树的实现
didaoxiu6491的博客
06-17 192
通常我们利用ext树显示部门信息的时候，需要显示部门的关联关系或者是上下级关系，那么，我们就需要传给ext树固定格式的json，下面我们就进行json的拼装。 首先我们假定A部门是B部门的上级部门 我们利用面向对象的原理创建一个简单的树节点对象，如下： package pojo; /** * ext树节点 * * @author huang * *...
Faceye中Ext树解决方案的实现
Ext树解决方案在Faceye中的应用 Ext树是一种基于JavaScript的树形结构解决方案，常用于实现树形菜单、分类树、权限树等。在Faceye基础版中，使用了大量的树结构，包括台台管理树、用户RSS订阅及分类树、用户博客...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值