<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Tree（树）</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>

  </head>

  <body>

    <ul id="treeID" class="easyui-tree">

       <li>

            <span>第一章</span>

            <ul>

                <li>

                    <span>第一节</span>

                    <ul>

                        <li>

                            <span>第一条</span>

                        </li>

                        <li>

                            <span>第二条</span>

                        </li>

                    </ul>

                </li>

                <li>

                    <span>第二节</span>

                </li>

            </ul>

       </li>

       <li>

               <span>第二章</span>

       </li>

    </ul>  

    <script type="text/javascript">

        $(function(){

            //收起所有的选项

            $("#treeID").tree("collapseAll");

        });

    </script>

  </body>

</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Tree（树）</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>

  </head>

  <body>

    <ul id="treeID"></ul>

    <script type="text/javascript">

        $("#treeID").tree({

            url : "/Demo/json/pro.json"

        });

    </script>

    <script type="text/javascript">

    </script>

  </body>

</html>
[

  {

    "id":1,

    "text":"广东",

    "state":"closed",

    "children":[

    {

       "id":11,

       "text":"广州"    ,

           "state":"closed",

           "children":[

          {

         "id":111,

                 "text":"天河"

          },

          {

         "id":112,

                 "text":"越秀"

          }

       ]

    },

    {

       "id":12,

       "text":"深圳"

    }

    ]

  },

  {

    "id":2,

    "text":"湖南"

  }

]

easyUI之Tree（树）的更多相关文章

  1. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

  2. Tree( 树) 组件[4]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一．方法列表 //部分方法onClick : funct ...

  3. Tree( 树) 组件[3]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一． 事件列表很多事件的回调函数都包含'node'参数, ...

  4. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一． 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  5. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一． 加载方式//class 加载方式<ul c ...

  6. 做权限树时 使用EasyUI中Tree

    符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...

  7. 如何将数据库中存的树转化为树形列表(以easyui的tree为例)

    很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢? 这篇文章是以构造一棵easyui前台框架的一个树形列表为例,后台框架是sprin ...

  8. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  9. .net easyui Tree树

    原文:https://www.cnblogs.com/hantianwei/archive/2012/03/19/2407118.html Tree 树   用 $.fn.tree.defaults ...

  10. 数据库中树形列表(以easyui的tree为例)

    构造一棵easyui前台框架的一个树形列表为例后台框架是spring MVC+JPA. 先看一下数据库是怎么建的,怎么存放的数据 下面是实体类 /** * 部门类 用户所属部门(这里的部门是一个相对抽 ...

随机推荐

  1. JAVA语言程序设计课后习题----第六单元解析（仅供参考）

    1 本题就是基本函数的用法 import java.util.Scanner; public class Poone { public static void main(String[] args) ...

  2. 四、DML语言

    目录 简介 主要操作 插入语句 语法 修改语句 修改单表 删除语句 DELETE TRUNCATE 两种删除总结 简介 DML语言就是数据操作语言 主要操作 插入:insert 修改:update 删 ...

  3. Java 读取 .properties 文件的几种方式

    Java 读取 .properties 配置文件的几种方式   Java 开发中,需要将一些易变的配置参数放置再 XML 配置文件或者 properties 配置文件中.然而 XML 配置文件需要通过 ...

  4. Hive正则表达式

    正则表达式基本语法 用圆括号将所有选择项括起来,相邻的选择项之间用|分隔.但用圆括号会有一个副作用,使相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种副作用. 其中 ?: 是非捕获元之一,还 ...

  5. bzoj 1787 && bzoj 1832: [Ahoi2008]Meet 紧急集合（倍增LCA）算法竞赛进阶指南

    题目描述 原题连接 Y岛风景美丽宜人,气候温和,物产丰富. Y岛上有N个城市(编号\(1,2,-,N\)),有\(N-1\)条城市间的道路连接着它们. 每一条道路都连接某两个城市. 幸运的是,小可可通 ...

  6. [转载]springboot--常用注解--@configration、@Bean

    springboot--常用注解--@configration.@Bean @Target({ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME ...

  7. 搜索引擎选择： Elasticsearch与Solr（转载）

    原文地址:http://www.cnblogs.com/chowmin/articles/4629220.html 搜索引擎选型调研文档 Elasticsearch简介* Elasticsearch是 ...

  8. 创建yum本地仓库，将阿里仓库同步到本地，并定时更新

    很多时候为了加速自己内部的rpm包安装速度,都会搭建自己的yum源仓库,而使用系统光盘自带的源,由于软件版本比较落后,所以不太适用,而大家都在用的阿里仓库比较好用,所以就想到了把阿里仓库的rpm全部拉 ...

  9. shell字符串处理

    一.字符串切片: ${#var}:返回字符串变量var的长度${var:offset}:返回字符串变量var中从第offset个字符后(不包括第offset个字符)的字符开始,到最后的部分,offse ...

  10. 牛客练习赛3 贝伦卡斯泰露——队列&&爆搜

    题目 链接 题意:给出一个长度为 $n$ 的数列 $A_i$,问是否能将这个数列分解为两个长度为n/2的子序列,满足: 两个子序列不互相重叠(是值不能有共同元素,但位置可以交错). 两个子序列中的数要 ...