动态树与静态树显示—

常用属性

常用事件:

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#"   }]
}]

结果:

动态树与静态树显示——（一）相关推荐

学习笔记：可持久化线段树（主席树）：静态 + 动态
学习笔记:可持久化线段树(主席树):静态 + 动态前置知识: 线段树.线段树分享可以看:@秦淮岸.@ZYzzz.@妄想の岚がそこに树状数组.\(BIT\)分享可以看:@T-Sherlock.Chi ...
可持久化线段树（静态）【学习笔记】
(静态)主席树入门前置知识:动态开点线段树,权值线段树. 1)权值线段树:相当于将线段树当成一个桶,其中的每一个点所代表的区间相当于一段值域.维护的值为这段值域中的一些信息. 例如该图,节点2代表的 ...
静态树表查找算法及C语言实现,数据结构算法C语言实现（三十二）--- 9.1静态查找表...
一.简述静态查找表又分为顺序表.有序表.静态树表和索引表.以下只是算法的简单实现及测试,不涉及性能分析. 二.头文件 /** author:zhaoyu date:2016-7-12 */ #inc ...
lucene配置动态域_Lucene BKD树-动态磁盘优化BSP树
当我对遇到的问题找一个解决方案的时候,我遇到了BKD树这个难题.从来没有听过吗?这种情况可能不只是你自己.从google上搜索"bkd tree",通常会把你引导到 origina ...
【线段树合并】解题报告：luogu P4556雨天的尾巴（树上对点差分 + 动态开点 + 线段树合并）线段树合并模板离线/在线详解
题目链接:雨天的尾巴本题本身是一个非常简单的一道树上差分的模板题,但是由于变态的数据范围,我们直接用数组是存不下的(本来使用一颗普通的线段树直接维护最大值即可.但是本题的空间只有128MB,直接按照 ...
洛谷P3960 列队(动态开节点线段树)
题意题目链接 Sol 看不懂splay..,看不懂树状数组... 只会暴力动态开节点线段树观察之后不难发现,我们对于行和列需要支持的操作都是相同的:找到第\(k\)大的元素并删除,在末尾插入一个元 ...
【bzoj4372】烁烁的游戏动态点分治+线段树
题目描述给一颗n个节点的树,边权均为1,初始点权均为0,m次操作: Q x:询问x的点权. M x d w:将树上与节点x距离不超过d的节点的点权均加上w. 输入第一行两个正整数:n,m 接下来的 ...
动态开点线段树(多棵线段树）的内存分配与回收
前言线段树,是一个很好用的能支持O(logn)区间操作的数据结构,随着做一些稍微烦一点的题,有时候会发现有些情况要开一个数组的线段树,更有甚者要树套树,而在很多情况下线段树就不能把所有点都开满了(否 ...
静态主席树总结(静态区间的ｋ大)
静态主席树总结(静态区间的k大) 首先我们先来看一道题给定N个正整数构成的序列,将对于指定的闭区间查询其区间内的第K小值. 输入格式: 第一行包含两个正整数N.M,分别表示序列的长度和查询的个数. ...

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

动态树与静态树显示——（一）相关推荐

最新文章

热门文章