jquery easyUI第二篇【綜合案例】

時間  2019-11-16
標籤 jquery easyui 第二 綜合案例 欄目 JQuery 简体版
原文   原文鏈接

tags: web前端庫javascript

基於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>


複製代碼

效果：

這裏寫圖片描述

這裏寫圖片描述

分頁

相信咱們的分頁已經作得很多了，此次咱們使用easyUI+Oracle+jdbc來作一個分頁...【以前大都都用Mysql，此次用Oracle】css

DateGrid會異步以POST方式向服務器傳入二個參數**：page和rows二個參數，服務端須要哪一個，就接收哪一個參數**html

  • 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

獲得對應的分頁數據，封裝到分頁對象中！java

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參數，若是爲空，就設置爲1node

把獲得的分頁數據封裝成datagrid要的格式，返回給瀏覽器！jquery

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>

複製代碼

效果：

這裏寫圖片描述

若是您以爲這篇文章幫助到了您，能夠給做者一點鼓勵web

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程