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

╰半夏微凉° 2021-09-17 07:10 220阅读 0赞

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

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

## 效果： ##

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

--------------------

# 分页 #

相信我们的分页已经做得不少了，这次我们使用**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>

## 效果： ##

![这里写图片描述][SouthEast 2]

--------------------

[SouthEast]: /images/20210827/931e65a90caf438d992ac684e95d5abf.png
[SouthEast 1]: /images/20210827/ec9253eac5bf4c3fb7dc737f4d239998.png
[SouthEast 2]: /images/20210827/62bb281300d34f6bb45a2169ceb39ce8.png