struts+hibernate+oracle+easyui实现lazyout组件的简单案例—

struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面

由于要导入好多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>