由于要导入好多js文件和cs文件，并且每个页面都需要导入，所以我把公共的导入js和css文件放在了一个jsp里面，在用到的里面直接导入即可，
此项目用到的js文件下载：这里
用到的css文件的下载：这里
公共的导入外部js和css的jsp（commTop.jsp）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <link rel="stylesheet" type="text/css" href="<%=path %>/easyui/css/demo.css"> <link rel="stylesheet" type="text/css" href="<%=path %>/easyui/themes/black/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=path %>/easyui/themes/icon.css"> <script type="text/javascript" src="<%=path %>/js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
接下来进入首页index.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="commTop.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>首页</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#top{
30%;
line-height:60px;
margin:0px auto;
}
</style>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var ename=$("#empName").val();
var deptno=$("#deptno").val();
$("#dg").datagrid(
"reload",
{"cond.empName":ename,"cond.dept.deptno":deptno}
);
});
/* 树形菜单 */
$("#tree").tree({
url:'grtallDept.action',
animate:true,
onClick:function(node){
if(node.id!=0){
//alert(node.id);
//将部门名称保存到隐藏域中
$("#deptno").val(); //当前的id
$("#dg").datagrid({
url:'getEmp.action',
queryParams: {
"cond.dept.deptno": node.id
},
pagination:true,
pageSize:2,
pageList:[2,4,6,8],
columns:[[
{field:'empno',title:'编号',100},
{field:'ename',title:'姓名',100},
{field:'job',title:'职位',100,align:'right'}
]]
});
};
},
onDblClick:function(node){
$(this).tree("toggle",node.target);
}
});
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'头部',split:true" style="height:100px;">
<div id="top">
<h2>员工信息查询系统</h2>
</div>
</div>
<div data-options="region:'south',title:'尾部',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'右边',split:true" style="100px;"></div>
<div data-options="region:'west',title:'部门信息',split:true" style="200px;">
<!-- 树形菜单 -->
<ul id="tree"></ul>
</div>
<div data-options="region:'center',title:'员工信息'" style="padding:5px;background:#eee;">
<!-- datagrid -->
<span style="color:black">员工姓名:</span><input type="text" id="empName"/>
<input type="hidden" id="deptno"/>
<input type="button" value="查询" id="btn1"/>
<table id="dg"></table>
</div>
</body>
</html>