EasyUI是用ul和li标签来完成树形结构的组合的,一个ul可视为父节点,li作为树形结构的子节点,而li标签里面嵌套的ul标签又可以作为父节点,不断的重复从而达到完成复杂树形结构的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 必须引用的css文件 -->
<link rel="stylesheet" href="/static/js/easyui/themes/default.css"/>
<link rel="stylesheet" href="/static/css/module.css"/>
<!-- 引入公用js文件 -->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/easyui/jquery.easyui.min.js"></script>
<title>easyui tree的使用</title>
</head>
<body>
<ul class="easyui-tree">
<li><span>红楼梦</span>
<ul>
<li>第1回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</li>
<li>第2回 贾夫人仙逝扬州城 冷子兴演说荣国府</li>
<li>第3回 托内兄如海荐西宾 接外孙贾母惜孤女</li>
<li>第4回 薄命女偏逢薄命郎 葫芦僧判断葫芦案</li>
<li>第5回 贾宝玉神游太虚境 警幻仙曲演红楼梦</li>
</ul>
</li>
<li><span>水浒传</span></li>
<li><span>三国演义</span>
<ul>
<li>第001回 宴桃园豪杰三结义 斩黄巾英雄首立功</li>
<li>第002回 张翼德怒鞭督邮 何国舅谋诛宦竖</li>
<li>第003回 议温明董卓叱丁原 馈金珠李肃说吕布</li>
<li>第004回 废汉帝陈留践位 谋董贼孟德献刀</li>
<li>第005回 发矫诏诸镇应曹公 破关兵三英战吕布</li>
</