easy_ui之创建树(二)
来源:互联网 发布:api原油库存数据下载 编辑:程序博客网 时间:2024/05/16 09:12
如我在左侧创建一个树形菜单:可以有如下几种方式:
1、利用<ul>和<li>创建静态的树:
在上篇文档创建的后台页面基础上添上:
<ulclass="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
即homePage.jsp变为:
<%@page language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@includefile="/common/head.jsp"%>
<html>
<head>
<title>我的简单的easy_ui测试</title>
<styletype="text/css">
body{
font-family:microsoft yahei;
}
</style>
</head>
<bodyclass="easyui-layout"style="background-color:#1D5D9C"
data-options="fit:true">
<divregion="north"style="height:78px;background-color:#1D5D9C">
</div>
<divregion="west"
style="width:200px;left:20px;background-color:#E4EEFC"
split="true">
<ulclass="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
</div>
<divdata-options="region:'center'"style="background:#87E2D1;">
</div>
<divregion="south"style="height:25px;padding:5px"align="center">
</div>
</body>
</html>
阅读全文