jquery easyUI第二篇【综合案例】

最新推荐文章于 2021-03-19 00:07:55 发布
最新推荐文章于 2021-03-19 00:07:55 发布
阅读量133 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript java json ViewUI
原文链接：https://juejin.im/post/5a64786251882573485a0d91
本文介绍了一个基于EasyUI框架的综合案例模版，详细展示了如何利用EasyUI结合Oracle数据库实现分页功能，包括前端页面布局、后台逻辑处理及数据库交互。

tags: web前端库

基于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】

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完整示例demo
12-13
jQuery-Easyui完整示例demo,
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
在jQuery EasyUI中，DataGrid是一种常用的表格展示控件，它可以与各种编辑器结合使用，如combobox（下拉框）来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
jquery-easyUI第二篇【综合案例】
3y
07-18 442
基于easyUI开发的一个综合案例模版 &lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title
用户界面框架jQuery EasyUI示例大全之Layout
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
01-08 686
jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件，助您打造适合当今网络的应用程序。 基本布局 本示例主要演示了一些基本布局，这些布局包括东、南、西、北和中间区域。【另附源代码供大家参考】 |在线D
JQueryEasyUI 组件的实例化
寂寞的一只狗的博客
03-09 1120
1、 组件实例化方式有两种 通过class属性实例化组件。 通过javascript代码实例化组件。   需要先引用   提示： 下面的方法不能同时使用 会发生错误 1、通过class属性实例化组件编码规则 通过特定的HTML标签，添加class属性和data
使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享
技术资料收集站
05-19 1044
在上四篇文章 　  《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》  　  《使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享》 　  《使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享》  　 《使用Jquery+EasyUI 进行框架项目开发案例讲解之三---组织机构源
jQuery easyui后台管理页面tab布局样式代码
10-30
在本案例中，我们关注的是"jQuery EasyUI后台管理页面的tab布局样式代码"。 Tab布局是jQuery EasyUI中的一个重要特性，它允许在一个页面上展示多个并行的内容区域，每个区域被一个标签页所代表，用户可以通过点击...
jquery easyUi使用文档pdf 和 word版本
07-26
**Word 格式文档——"jqueryEasyui培训文档.doc"** Word 文档可能提供了更便于编辑和注解的格式，内容可能与 PDF 相似，但可能更适合那些喜欢手动修改和添加笔记的读者。它可能包括： 1. **教程部分**：逐步指导...
jquery-easyui-themes
07-05
本篇文章将深入探讨jQuery EasyUI的主题设计与应用，特别是与CSS样式、jQuery配色相关的知识点，并结合提供的资源——"dark-hive"、"sunny"、"pepper-grinder"、"cupertino"这四个主题文件，来进一步解析和实践。...
开源ERP系统开发实战：SSM与jQuery EasyUI集成案例
jQuery EasyUI是一个基于jQuery的前端框架，它为创建现代的Web应用程序提供了一组丰富的用户界面组件，例如：数据网格（data grid）、树形控件（tree）、标签页（tab panel）、对话框（dialog）等。EasyUI易于使用，...
jQuery EasyUI window窗口实例
weixin_30726161的博客
06-28 237
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery EasyUI window窗口</title> <link rel="stylesheet" id="easyuiTheme" type="text/css" hre...
JQuery EasyUI 案例加使用
weixin_33717117的博客
11-06 178
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Jquery+EasyUI 进行框架项目开发案例讲解
逍遥飞鹤的专栏
08-22 5428
使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享  　　  在上三篇文章 　  《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》  　　《使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享》 　　《使用Jquery+EasyUI 进行框架项目开发案例讲解之三-
jQuery EasyUI 实例（一）
weixin_30840253的博客
06-19 176
jQuery EasyUI就不用介绍了，一款轻量级UI框架，现在对于这方面的资源网上也不少，但是真正的实例却也很少，尤其是.Net方面的，不过现在孙宇一直在发布一些EasyUI的视频，对大家的帮助可能很大，我呢，仅通过一个实例给广大小白们介绍怎样使用EasyUI(其实自己也是小白，嘿嘿)。 在这里借助疯狂秀才的界面框架，大家都感觉挺不错的。 大家也都知道.Net服务器端控件的弊端...
easyui php 例子,实例分享jQuery EasyUI开发技巧总结
weixin_29053067的博客
03-10 196
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。本文主要介绍了jQuery EasyUI开发技巧总结的相关资料,希望通过本文大家能够掌握EasyUI的开发技巧，需要...
easyui php 例子,实例简述jQuery Easyui一些用法
weixin_42498346的博客
03-19 156
本文主要介绍了jQuery Easyui一些用法，非常不错，具有参考借鉴价值，需要的的朋友参考下吧，希望能帮助到大家。1、form里的一些控件如textbox、combobox等添加额外的一些事件，如鼠标事件(mouseover、click等)，键盘事件(keydown、keyup等)，都可以用2中方式实现，以textbox为例方法一：on方法$("#tt").textbox('textbox')...
easyUI例子学习
weixin_34356555的博客
09-04 100
2019独角兽企业重金招聘Python工程师标准>>> ...
EASYUI数据展示实例（js脚本控制）
小飞鱼通达 二开
04-28 731
在简单数据展示的基础上，使用js脚本进行数据的获取及显示控制，便于进一步使用程序进行控制。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Fluid DataGrid - jQuery EasyUI Demo&lt;/title&gt; &
【连载】研究EasyUI系统——EasyUI入门例子
来啊，相互伤害啊
07-31 580
EasyUI入门例子录
深入探索jQuery.Easyui框架：实战案例分析
jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合，它为网站开发人员提供了一系列现成的组件，这些组件可用于创建交互式的用户界面。它是一种用于简化网页开发的前端框架，尤其适合快速开发数据网格、树形控件、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值