基于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第二篇【综合案例】的更多相关文章

  1. 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  2. 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享  在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...

  3. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

    http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  5. 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  6. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  7. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  8. 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享    在开始讲解之前,我们先来看一下什 ...

  9. (转)使用Jquery+EasyUI 进行框架项目开发案例讲解之四---组织机构管理源码分享

    原文地址:http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码 ...

随机推荐

  1. 【Tomcat】batch获得war包

    功能: 将maven项目打包复制到tomcat/webapps set git=C:\Users\zhengwenqiang\git set tomcat=e:\tomcat7.0.64 c: cd ...

  2. expander graph&random walk的一个小应用

    此文主要总结的是一种随机算法,旨在判断一个expander图上两点是否连通.复杂度O(logn).算法思路清奇. expander graph博大精深,如果对expander graph的生成,fam ...

  3. @Autowired和@Resource的区别是什么?

    @Autowired 与@Resource: 1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配 ...

  4. golang channel无缓冲通道会发生阻塞的验证

    公司搞了午间技术par,本周我讲的主题是关于无缓冲通道channel是否会发生阻塞,并进行了验证. go语言中channel分为无缓冲通道和有缓冲通道两种 channel提供了一种在goroutine ...

  5. 2015年ACM长春区域赛比赛感悟

    距离长春区域赛结束已经4天了,是时候整理一下这次比赛的点点滴滴了. 也是在比赛前一周才得到通知要我参加长春区域赛,当时也是既兴奋又感到有很大的压力,毕竟我的第一场比赛就是区域赛水平,还是很有挑战性的. ...

  6. for 循环语句

    for循环写在<script></script>里面. for(初始条件:循环条件:状态改变){循环内容} 关键词:break:结束此次循环,continue:跳过此次循环,继 ...

  7. HDMI转MIPI DSI芯片方案TC358779XBG

    型号:TC358779XBG功能:HDMI1.4转MIPI DSI通信方式:IIC分辨率:1920*1080电源:3.3/1.8/1.2封装形式:BGA80深圳长期现货 ,提供技术支持,样品申请及规格 ...

  8. 高阶自定义View --- 粒子变幻、隧道散列、组合文字

    高阶自定义View --- 粒子变幻.隧道散列.组合文字 作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:h ...

  9. mysql数据类型double和decimal区别详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt336 实数是带有小数部分的数字.然而,它们不只是为了存储小数部分,也可以使用 ...

  10. 寻找Harris、Shi-Tomasi和亚像素角点

    Harris.Shi-Tomasi和亚像素角点都是角点,隶属于特征点这个大类(特征点可以分为边缘.角点.斑点). 一.Harris角点检测是一种直接基于灰度图像的角点提取算法,稳定性较高,但是也可能出 ...