<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

        <title>tree</title>

        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

        <script type="text/javascript" src="Ext/ext-base.js"></script>

        <script type="text/javascript" src="Ext/ext-all.js"></script>

        <script type="text/javascript">

            Ext.onReady(function(){

                //树控件由Ext.tree.TreePanel类定义，控件名称为TreePanel，TreePanel类继承自Panel面板

                var tree = new Ext.tree.TreePanel({

                    el:'tree'//这里的参数‘tree’表示渲染的DOM的id

                });

                var root = new Ext.tree.TreeNode({text:'我是根'});

                //用setRootNode()方法把root放到tree里

                tree.setRootNode(root);

                //对tree进行渲染

                tree.render();

            });

        </script>

    </head>

    <body>

        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>

        <!-- 这里定义渲染的DIV，树将出现在这人DIV里 -->

        <div id="tree" style="height:300px;"></div>

    </body>

</html>
<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

        <title>tree</title>

        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

        <script type="text/javascript" src="Ext/ext-base.js"></script>

        <script type="text/javascript" src="Ext/ext-all.js"></script>

        <script type="text/javascript">

            Ext.onReady(function(){

                var tree = new Ext.tree.TreePanel({

                    el:'tree'

                });

                var root = new Ext.tree.TreeNode({text:'我是根'});

                var node1 = new Ext.tree.TreeNode({text:'我是根的第一个枝子'});

                var node2 = new Ext.tree.TreeNode({text:'我是根的第一个枝子的第一个叶子'});

                var node3 = new Ext.tree.TreeNode({text:'我是根的第一个叶子'});

                //使用appendChild()为一人结点添加子结点

                node1.appendChild(node2);

                root.appendChild(node1);

                root.appendChild(node3);

                tree.setRootNode(root);

                tree.render();

                //没有root.expand(true, true);就每次都要点击根或枝前面的加号才能展开整棵树。

                //root.expand(true, true);第一个参数表示是否递归展开所有子结点，如果为false，就只展开第一级子结点，下面的结点仍然是折叠状态。第二个参数表示是否要动画效果，如果为true可以明显看出这些结点是逐渐展开的。

                root.expand(true, true);

            });

        </script>

    </head>

    <body>

        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>

        <div id="tree" style="height:300px;"></div>

    </body>

</html>

Ext树形结构的更多相关文章

  1. Extjs实现树形结构三连选

    当项目中需要一个部门人员选择或者省市县地域连选时,就需要树形结构的连选. 再此,写了一个简单的树形结构三连选功能,模拟从后台读取数据和处理数据(欢迎大家交流指正). 代码如下: 循环创建三棵树,其中只 ...

  2. 树形结构JSON的实现方法

    在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...

  3. js文章列表的树形结构输出

    文章表设计成这样了 后端直接给了无任何处理的json数据,现在要前端实现树形结构的输出,其实后端处理更简单写,不过既然来了就码出来 var doclist = [{ "id": 1 ...

  4. GridView 树形结构分组的功能

    在“会飞的鱼”博客中看到GridView实现树形结构的代码,经过修改,添加了树形结构中的复选框功能,欢迎吐槽. 源地址:http://www.cnblogs.com/chhuic/archive/20 ...

  5. [从产品角度学EXCEL 02]-EXCEL里的树形结构

    这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...

  6. C# EasyUI树形结构权限管理模块

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...

  7. YbSoftwareFactory 代码生成插件【十八】：树形结构下的查询排序的数据库设计

    树形结构的排序在中国特色下十分普遍也非常重要,例如常说的五大班子,党委>人大>政府>政协>纪委,每个班子下还有部门,岗位,人员,最终排列的顺序通常需要按权力大小.重要性等进行排 ...

  8. Java创建树形结构算法实例

    在JavaWeb的相关开发中经常会涉及到多级菜单的展示,为了方便菜单的管理需要使用数据库进行支持,本例采用相关算法讲数据库中的条形记录进行相关组装和排序讲菜单组装成树形结构. 首先是需要的JavaBe ...

  9. Atitit 常见的树形结构 红黑树  二叉树   B树 B+树  Trie树 attilax理解与总结

    Atitit 常见的树形结构 红黑树  二叉树   B树 B+树  Trie树 attilax理解与总结 1.1. 树形结构-- 一对多的关系1 1.2. 树的相关术语: 1 1.3. 常见的树形结构 ...

随机推荐

  1. fedroa20 没法开启ntpd服务器

    1现象:ntpd老是没法开启,ntpd -d显示有个进程占用123端口. [root@vd13crmtb01 ~]# systemctl enable ntpd.service         //开 ...

  2. intellij idea 远程tomcat 调试

    由于在服务器上远程调试风险较高,所以万不得已的情况下 不要这样做.可以本地调试好  再上传到服务器上. 1.关闭防火墙 启动Firewalld,及开机自启. # systemctl start fir ...

  3. JavaWeb知识回顾－servlet简介。

    现在公司主要用jsp+servlet这种原生的开发方式,用的是uap的开发平台,所以趁着这个时候把有关javaweb的知识回顾一下. 首先是从servlet开始. 一.什么是Servlet?(是一些理 ...

  4. springboot 集合 meshsite3

    工程目录 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...

  5. python开发学习-day04(迭代器、生成器、装饰器、二分查找、正则)

    s12-20160123-day04 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(17)——思考2

    写在前面 今天吃饭回来,突然有一个更好的想法,这里做一下记录. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战 ...

  7. linux java环境变量设置

    下载JRE或者JDK后解压,设置以下环境变量 JAVA_HOME=/home/zm/jdk1.8.0_181JRE_HOME=/home/zm/jdk1.8.0_181/jreCLASSPATH=.: ...

  8. .htaccess文件

    前言 看了几篇文章,发现自己对于如何维护普通的服务器安全完全不会,先从简单的.htaccess来研究吧 .htaccess文件的作用,就是更改httpd.ini文件中的配置,但作用范围仅限当前文件夹 ...

  9. Java线程池使用和常用参数（待续）

    线程池怎么实现的,核心参数讲一讲? Executors是线程池的工厂类,通过调用它的静态方法如下: Executors.newCachedThreadPool(); Executors.newFixe ...

  10. springＭVC

    SpringMVC架构流程: 1.用户发送请求至前端控制器DispatcherServlet2.DispatcherServlet收到请求调用HandlerMapping处理器映射器.3.处理器映射器 ...