<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${ctx }/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/themes/icon.css">
<script type="text/javascript" src="${ctx }/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/easyui-lang-zh_CN.js"></script>
<title>这是展示的主页</title>
<script type="text/javascript">
$(function(){
//顶部导航切换
$(".nav li a").click(function(){
$(".nav li a.selected").removeClass("selected")
$(this).addClass("selected");
})
})
</script>
</head>
<body>
<!-- 这边是通过easyui进行布局,通过layout的class属性进行部署 -->
<div class="easyui-layout" style="width: 100%;height:730px;">
<div region="north" split="true" >
<div class="topleft">
<a href="main.html" target="_parent"><img src="images/logo.png" title="系统首页" /></a>
<ul class="nav" style="width:100%;height:130px;">
<li><a href="default.html" target="rightFrame" class="selected"><img src="images/icon01.png" title="工作台" /><h2>工作台</h2></a></li>
<li><a href="imgtable.html" target="rightFrame"><img src="images/icon02.png" title="模型管理" /><h2>模型管理</h2></a></li>
<li><a href="imglist.html" target="rightFrame"><img src="images/icon03.png" title="模块设计" /><h2>模块设计</h2></a></li>
<li><a href="tools.html" target="rightFrame"><img src="images/icon04.png" title="常用工具" /><h2>常用工具</h2></a></li>
<li><a href="computer.html" target="rightFrame"><img src="images/icon05.png" title="文件管理" /><h2>文件管理</h2></a></li>
<li><a href="tab.html" target="rightFrame"><img src="images/icon06.png" title="系统设置" /><h2>系统设置</h2></a></li>
</ul>
</div>
</div>
<div region="west" title="红色警戒" split="true" style="text-align: center;width:200px;">
<div class="easyui-accordion" fit="true">
<div title="商品管理" iconCls="icon-ok">
<ol>
<li><a href="#">添加商品</a></li>
<li><a href="#">更新商品</a></li>
<li><a href="#">其他</a></li>
</ol>
</div>
<div title="考勤管理" iconCls="icon-ok">
<ol>
<li><a href="#">查询所有用户信息</a></li>
<li><a href="#">添加</a></li>
<li><a href="#">其他</a></li>
</ol>
</div>
<div title="用户管理" iconCls="icon-ok">
<ol>
<li><a href="#">查询所有用户信息</a></li>
<li><a href="#">添加用户</a></li>
<li><a href="#">其他</a></li>
</ol>
</div>
<div title="公告管理" iconCls="icon-reload">
<ol>
<li><a href="#">设置公告</a></li>
<li><a href="#">公告列表</a></li>
<li><a href="#">查询公告</a></li>
<li><a href="#">其它</a></li>
</ol>
</div>
</div>
</div>
<div region="center" style="text-align: center;">
<div class="easyui-tabs">
<div title="欢迎使用">
<div style="padding: 10px">
<table class="easyui-datagrid" url="${ctx }/goods/list" style="width: 1000px;height: 600px;" pagination="true">
<thead>
<tr>
<th field="id" width="150px">ID</th>
<th field="goodsname" width="150px">商品编号</th>
<th field="goodsrice" width="150px">商品价格</th>
<th field="goodskc" width="150px">商品库存</th>
<th field="goodszk" width="150px">商品折扣</th>
<th field="goodscz" width="150px">操作</th>
</tr>
</thead>
<tbody>
<!--Easyui很强大,这下面的内容已经不需要再写了。所以注释掉
<tr>
<td>1</td>
<td>导弹</td>
<td>￥500</td>
<td>500</td>
<td>9.5</td>
<td>
<a class="easyui-linkbutton" iconCls="icon-ok">编辑</a>
<a class="easyui-linkbutton" iconCls="icon-cancel">删除</a>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<div region="east" split="true" style="text-align: center;width:200px;">
<ul class="easyui-tree" style="text-align:left;width:200px;">
<li>
<span>这是第一集菜单</span>
<ul>
<li>
<span>
这是第二集菜单。
</span>
</li>
</ul>
</li>
</ul>
<ul class="easyui-tree" style="text-align:left;width:200px;">
<li>
<span>这是第一集菜单</span>
<ul>
<li>
<span>
这是第二集菜单。
</span>
</li>
</ul>
</li>
</ul>
</div>
<div region="south" split="true" style="text-align: center;height:30px;">
这是南边
</div>
</div>
</body>
</html>
再来张效果图
