基于easyUI开发的一个综合案例模版


<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>练习</title>

<!-- 引入css文件，不限顺序 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link>

<!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>

</head>
<body>

<!-- Layout布局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">

<!-- 北 -->
<div data-options="region:'north',border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;">
<center><font style="font-size:66px">jQuery-EasyUI组件</font></center>            
</div>   

<!-- 南 -->
<div data-options="region:'south'" style="height:100px;">
<center><font style="font-size:33px">XX公司版权所有</font></center>           
</div>   

<!-- 东 -->
<div data-options="region:'east',iconCls:'icon-reload'" style="width:100px;"></div>   

<!-- 西 -->
<div data-options="region:'west'" style="width:200px;">
<!-- Accordion分类 -->
<div 
id="accordionID" 
class="easyui-accordion" 
data-options="fit:true,border:false,selected:-1" 
style="width:300px;height:400px;">   
<div title="部门管理" data-options="iconCls:'icon-save'" style="padding:10px;">   
<!-- Linkbutton按钮 -->
<a 
id="btn_add" 
href="#" 
class="easyui-linkbutton" 
data-options="iconCls:'icon-add'">增加部门</a><p> 
<a 
id="btn_find" 
href="#" 
class="easyui-linkbutton" 
data-options="iconCls:'icon-search'">查询部门</a><p> 
<a 
id="btn_update" 
href="#" 
class="easyui-linkbutton" 
data-options="iconCls:'icon-edit'">修改部门</a><p> 
<a 
id="btn_delete" 
href="#" 
class="easyui-linkbutton" 
data-options="iconCls:'icon-remove'">删除部门</a><p>  
</div>   
<div title="人事管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
<!-- tree树 -->              
<ul id="treeID" class="easyui-tree" data-options="lines:true">   
<li>
<span>增加人事</span>
</li>
<li>
<span>查询人事</span>
<ul>
<li>
<span>分页查询人事</span>
<ul>
<li>
<span>模糊分页查询人事</span>
</li>
<li>
<span>精确分页查询人事</span>
</li>
</ul>
</li>
<li>
<span>查询所有人事</span>
</li>
</ul>
</li>
</ul>
</div>   
<div title="客户管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        客户管理    
</div> 
<div title="权限管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        权限管理    
</div>
<div title="报表管理" data-options="iconCls:'icon-print'" style="padding:10px;">   
                        报表管理    
</div> 
<div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px;">   
                        帮助    
</div>  
</div>
</div>   

<!-- 中 -->
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<!-- Tabs选项卡 -->
<div 
id="tabsID" 
class="easyui-tabs" 
style="width:500px;height:250px;"
data-options="plain:true,border:false,selected:-1,fit:true">   
</div>
</div>   

</div>

<script type="text/javascript">
//定位4个按钮
 $("a").click(function(){
//获取你所单击的按钮的标题
var title = $(this).text();
//去空格
 title = $.trim(title);
//如果title变量是"增加部门"
if("增加部门" == title){
//查看该选项卡是否已经打开
var flag = $("#tabsID").tabs("exists",title);
//如果未打开
if(!flag){
//打开选项卡
 $("#tabsID").tabs("add",{
"title" : title,
"closable" : true,
"content" : "文本",
"iconCls" : "icon-add"
 });
 }
 }else if("查询部门" == title){
var flag = $("#tabsID").tabs("exists",title);
if(!flag){
//打开选项卡
 $("#tabsID").tabs("add",{
"title" : title,
"closable" : true,
"content" : "文本",
"iconCls" : "icon-search"
 });
 }
 }
 });
</script>
<script type="text/javascript">
 $(function(){
//收起所有的选项
 $("#treeID").tree("collapseAll");
 });
</script>
<script type="text/javascript">
 $("#treeID").tree({
 onClick : function(node){
//获取点击树节点的文本
var title = node.text;
//去空格
 title = $.trim(title);
//产生tab选项卡
var flag = $("#tabsID").tabs("exists",title);
//如果没有打开的话
if(!flag){
//打开选项卡
 $("#tabsID").tabs("add",{
"title" : title,
"closable" : true,
"href" : "${pageContext.request.contextPath}/empList.jsp",
"iconCls" : "icon-search"
 });
 } 
 }
 });
</script>

</body>
</html>

效果：

jquery-easyUI第二篇【综合案例】

分页

相信我们的分页已经做得不少了，这次我们使用easyUI+Oracle+jdbc来做一个分页…【之前大都都用Mysql，这次用Oracle】

DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数

page：需要显示的页号
rows：需要获取多少条记录

编写emp实体


package zhongfucheng.entity;

import java.io.Serializable;
import java.util.Date;

/**
 * Created by ozc on 2017/7/17.
 */
public class Emp implements Serializable {

private Integer empno;
private String ename;
private String job;
private Integer mgr;
private Date hiredate;
private Integer sal;
private Integer comm;
private Integer deptno;

public Emp() {
    }

public Emp(Integer empno, String ename, String job, Integer mgr, Date hiredate, Integer sal, Integer comm, Integer deptno) {
this.empno = empno;
this.ename = ename;
this.job = job;
this.mgr = mgr;
this.hiredate = hiredate;
this.sal = sal;
this.comm = comm;
this.deptno = deptno;
    }

public Integer getEmpno() {
return empno;
    }

public void setEmpno(Integer empno) {
this.empno = empno;
    }

public String getEname() {
return ename;
    }

public void setEname(String ename) {
this.ename = ename;
    }

public String getJob() {
return job;
    }

public void setJob(String job) {
this.job = job;
    }

public Integer getMgr() {
return mgr;
    }

public void setMgr(Integer mgr) {
this.mgr = mgr;
    }

public Date getHiredate() {
return hiredate;
    }

public void setHiredate(Date hiredate) {
this.hiredate = hiredate;
    }

public Integer getSal() {
return sal;
    }

public void setSal(Integer sal) {
this.sal = sal;
    }

public Integer getComm() {
return comm;
    }

public void setComm(Integer comm) {
this.comm = comm;
    }

public Integer getDeptno() {
return deptno;
    }

public void setDeptno(Integer deptno) {
this.deptno = deptno;
    }
}

编写EmpDao

使用Oracle的语法来实现分页…!


public class EmpDao {
public  int getPageRecord() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
        String sql = "SELECT COUNT(EMPNO) FROM EMP";
        String count = queryRunner.query(sql, new ScalarHandler()).toString();
return Integer.parseInt(count);
    }
public  List<Emp> getList(int start, int end) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

        String sql = "SELECT *FROM (SELECT rownum rownumid,emp.* FROM emp WHERE rownum <= ?) xx WHERE xx.rownumid> ?";

        List<Emp> list = (List<Emp>) queryRunner.query(sql, new Object[]{end, start}, new BeanListHandler(Emp.class));
return list;
    }
}

编写EmpService

得到对应的分页数据，封装到分页对象中！


public class EmpService {


private EmpDao empDao = new EmpDao();
public Page getPageResult(int currentPage) throws Exception {

        Page page = new Page(currentPage, empDao.getPageRecord());
        List<Emp> empList = empDao.getList(page.getStartIndex(), page.getLinesize() * currentPage);
        page.setList(empList);
return page;
    }

}

处理请求的Servlet

接收page参数，如果为空，就设置为1

把得到的分页数据封装成datagrid要的格式，返回给浏览器！

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        try {
            //调用service
            EmpService empService = new EmpService();

            //设置编号方式
            request.setCharacterEncoding("UTF-8");

/*获取客户端传递进来的参数，easyUI使用的是page参数*/
            String pageStart = request.getParameter("page");

            if (pageStart == null || pageStart.length() == 0) {
                pageStart = "1";
            }
            int currentPage = Integer.parseInt(pageStart);
            Page pageResult = empService.getPageResult(currentPage);

            Map map = new HashMap();

            map.put("total", pageResult.getTotalRecord());
            map.put("rows", pageResult.getList());


            //使用第三方工具将map转成json文本
            JSONArray jsonArray = JSONArray.fromObject(map);
            String jsonJAVA = jsonArray.toString();

            //去掉二边的空格
            jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
            System.out.println("jsonJAVA=" + jsonJAVA);

            //以字符流的方式，将json字符串输出到客户端
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter pw = response.getWriter();
            pw.write(jsonJAVA);
            pw.flush();
            pw.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

JSP页面显示


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

<title>dataGrid+分页</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<body>

<table id="dg" style="width: 800px" ></table>
<script>
 $('#dg').datagrid({
 url:'${pageContext.request.contextPath}/getPageServlet?time'+ new Date().getTime(),
 columns:[[

/*这里的field要对应JavaBean的属性名称，否则获取不到数据*/
 {field:'empno',title:'编号',width:100},
 {field:'ename',title:'姓名',width:100},
 {field:'job',title:'工作',width:100},
 {field:'mgr',title:'上编',width:100},
 {field:'hiredate',title:'入时',width:100},
 {field:'sal',title:'月薪',width:100},
 {field:'comm',title:'佣金',width:100},
 {field:'deptno',title:'部编',width:100}
 ]],
 fitColumns : true,
 singleSelect : true,
 pagination : true,

/*pageSize对应rows，pageNum对应page，datagrid会自动把这两个值传递进去*/
 pageNumber : 1,
 pageSize : 3,
 pageList : [3],
 fit:true
 });
</script>

</body>
</html>

效果：

jquery-easyUI第二篇【综合案例】

秒客网

jquery-easyUI第二篇【综合案例】

基于easyUI开发的一个综合案例模版

效果：

分页

编写emp实体

编写EmpDao

编写EmpService

处理请求的Servlet

JSP页面显示

效果：

相关文章