动态树与静态树显示——（一）

最新推荐文章于 2022-10-24 01:45:00 发布
最新推荐文章于 2022-10-24 01:45:00 发布
阅读量379 收藏
点赞数
文章标签： json 数据结构与算法 javascript ViewUI

常用属性

 

常用事件:

 

 

 

 

1.第一种是静态树:

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

    <head>
        <title>静态树</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../themes/icon.css">
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
        <script src="../js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        
        <ul id="treeID" class="easyui-tree" data-options="animate:true,checkbox:true,lines:true">
            <li>
                <span>第一章</span>
                <ul>
                    <li>
                        <span>第一节</span>
                        <ul>
                            <li>
                                <span>第一条</span>
                            </li>
                            <li>
                                <span>第二条</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>第二节</span>
                        
                    </li>
                    <li>
                        <span>第三节</span>
                        
                    </li>
                    <li>
                        <span>第四节</span>
                        
                    </li>
                    <li>
                        <span>第五节</span>
                        
                    </li>
                </ul>
            </li>
            <li>
                <span>第二章</span>
            </li>
            <li>
                <span>第三章</span>
            </li>
            <li>
                <span>第四章</span>
            </li>
        </ul>
    
        <script type="text/javascript">
//            文档加载后折叠所有的节点
            $(function(){
                $("#treeID").tree("collapseAll");
            })
        </script>
    </body>

</html>

 效果:

 

 

2.动态树：

 

例如:

 

 

 

 

动态树例子:

目录结构:

 

页面:

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

    <head>
        <title>动态</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="themes/icon.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
        <script src="js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>

        <ul id="ttt"></ul>
        <script type="text/javascript">
            $("#ttt").tree({
                url: "/Oraclefenye/tree_data.json",
                lines: true
            });
        </script>
        <script type="text/javascript">
            $("#ttt").tree({
                onClick: function(node) {
                    alert(node.text);
                }
            });
        </script>

    </body>

</html>

 

 

tree_data.json

[
  {
    "id":1,
    "text":"第一章" 
  },
  {
    "id":2,
    "text":"第二章",
    "state":"closed",
    "children":[
       {
         "id":21,
          "text":"第一节" 
       },
       {
       "id":22,
          "text":"第二节"        
       },
       {
       "id":23,
          "text":"第三节",
          "state":"closed",
          "children":[
         {
          "id":231,
              "text":"第一条" 

         },    
         {
        "id":232,
              "text":"第二条"     
         }
      ]      
       }
    ] 
  }
]

 

 效果:

 

 

 

将json数据改为

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

 

结果:

 

weixin_34314962
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
阿赛树形论坛系统 AsaiSXBBS V5.rar
07-06
24、支持普通论坛模式、普通树形模式、豪华树形模式三种个性模式，支持自由切换，可以自行设定默认的论坛显示模式； 25、默认提供8种论坛风格，可以设置默认的论坛，也可以在前台由用户自己选择喜欢的风格，所有...
easyui的tree（静态树/动态树）
qq_45547474的博客
06-21 3259
easyui的tree一、tree简介二、tree组件工具类的实现思路三、tree组件工具类的使用四、总结二级目录三级目录 一、tree简介 二、tree组件工具类的实现思路 三、tree组件工具类的使用 四、总结 二级目录 三级目录 ...
静态树表的查找（最优查找树和次优查找树）
Keep_Trying_Go的博客
10-24 2657
静态树表的查找（最优查找树和次优查找树）
静态树表（次优查找树）（第九章 P222 算法9.3,9.4）
但行好事，莫问前程
04-13 943
typedef int Status; /* Status是函数的类型,其值是函数结果状态代码，如OK等 */ typedef int Boolean; /* Boolean是布尔类型,其值是TRUE或FALSE */ #include<malloc.h> /* malloc()等 */ #include<stdio.h> /* EOF(=...
9.3 静态树写法
小魚兒
10-24 136
#include <cstdio> #include <vector> #include <queue> using namespace std; //树的算法 //1、静态写法 const int maxn=110; struct node { int data; //typename data; vector<int> child;//...
数据结构课程设计：哈夫曼编/译码的设计与实现（含文件）
08-09
调用建立哈夫曼树的功能模块，构造静态链表HuffNode的存储；调用建立哈夫曼编码的功能模块，在屏幕上显示如下对应关系： A——111、B——110、C——10、D——0；调用译码的功能模块，输入代码串“111110100”后，...
GXWorks3与KEPServerEX6连接.docx
06-09
GXWorks3与KEPServerEX6连接 本文将详细介绍如何使用GXWorks3软件与KEPServerEX6软件实现三菱FX5U PLC设备的网络连接和OPC通信。 一、GXWorks3软件设置 1. 打开GXWorks3软件，新建一个工程项目。 2. 在左侧树状...
Java 语言基础 —— 非常符合中国人习惯的Java基础教程手册
04-28
定义一个类与定义一个数据类型是有区别的。在程序设计语言中，把定义数据类型的能 力作为一种很重要的能力来对待。在面向对象的语言中，类的功能更强大，这是因为类不仅 含有定义数据类型的功能，而且还包含了对方法...
动易专业版——Upgrade_SiteFactory.Professional_2.5.2.0-2.5.3.0的升级包
01-23
●普通管理员没有设置专题类别权限，但在信息管理专题树右键菜单中仍会显示“设置专题类别”。 ●普通管理员不能对自定义表单进行修改、删除、字段列表的操作。 ●管理员没有评论管理与审核的权限，只有回复评论...
静态树例子
01-07
js静态树、一级树形菜单、多级树形菜单，可用。
动态，静态生成树形结构数据
09-03
可以动态获取数据后显示树形结构数据。 可以静态示树形结构数据。
完整ajax生成树实例，生成静态树动态树！！
10-12
ajax生成树，包括连db类。需要练mysql数据库 具体方法工程中有说明 希望能对你有所帮助！！！
JS 静态树 dtree
07-27
加了几句注释 博文链接：https://yhef.iteye.com/blog/743739
js脚本结合html实现多级静态树
02-24
你还在为找不到合适的网站菜单而发愁吗，这个可以帮助你
字典树学习小结
wyg1997
08-04 434
写了几道字典树的基础题了，现在写一个总结吧。 其实动态建树和静态建树都一样，只是动态建树省空间费时间，静态建树省时间费空间。 那么如果碰上数据很大的题的时候，还是选择静态建树吧，毕竟内存没有那么容易超。 那下面先说动态建树吧： 变量： struct Trie { Trie *next[10]; int v; void init() { v = 0; for
静态查找静态树表
心之所向
09-29 6138
一、基本思想静态树表为的是解决查找概率不等的记录。一般情况下，我们都是默认各个记录等概率查找的，但是有些记录可能不是等概率的。我们可能会首先搜索一些概率大的记录。 二、构造过程次优查找树和最优查找树的查找性能仅差1%-2%，而构造最优查找树花费时间代价较高。现构造一棵二叉树，使得二叉树的带权内的路径长度PH值在所有具有同样权值的二叉树中近似最小，称为次优查找树。 构造原理如下： 三、事例
动态建树和静态建树 理解
weixin_30265171的博客
01-24 126
前言 Trie树理解，该博客已经对Trie树进行了简要的介绍； Trie树分为静态建树和动态建树，两者的区别在于： 插入操作时，静态建树中插入不存在的结点利用的是已经创建好的大数组进行存放，而动态数组则会动态申请一个结点； 删除操作时，静态建树中删除只需将跟节点的next数组都置为空即可，而动态建树中则要递归删除已经分配的每一个结点; 动态建树使用new费时，静态建树预存结点数据很费空间； ...
树的静态写法
10-16 2295
我们令指针域存放其所有子结点的地址（或者为其开一个数组，存放所有子结点的地址）。不过这听起来有点麻烦，所以还是建议在考试中使用其静态写法，也就是用数组下标来代替所谓的地址。当然这需要事先开一个大小不低于结点上限个数的结点数组，因此结构体node的定义会类似于下面这样： struct node{ typename data; //数据域 int child[maxn]; //指针域，存放所有...
再说一说动态多态与静态多态
最新发布
09-27
动态多态和静态多态都是多态的不同表现形式。静态多态是在编译阶段就已经确定了函数地址的多态，主要体现在重载和模板的使用上。在编译阶段，根据函数的参数个数、类型、顺序等信息，编译器就可以确定函数的地址。而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值