由于要导入好多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{ width: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:'编号',width:100}, {field:'ename',title:'姓名',width:100}, {field:'job',title:'职位',width: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="width:100px;"></div> <div data-options="region:'west',title:'部门信息',split:true" style="width: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>
