Java进阶学习第三十一天（EasyUI）
一、省-市-区三级联动【struts2 +非数据库版】
public class Bean {
private String province;//省份
private String city;//城市
public Bean(){}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
}
public class ProvinceCityAreaService {
/**
* 根据省份查询城市
*/
public List findCityByProvince(String province) throws Exception{
List cityList = new ArrayList();
if("广东".equals(province)){
cityList.add("广州");
cityList.add("深圳");
cityList.add("中山");
}else if("湖南".equals(province)){
cityList.add("长沙");
cityList.add("株洲");
}
return cityList;
}
/**
* 根据城市查询区域
*/
public List findAreaByCity(String city) throws Exception{
List areaList = new ArrayList();
if("广州".equals(city)){
areaList.add("天河");
areaList.add("白云");
}else if("深圳".equals(city)){
areaList.add("宝安");
areaList.add("南山");
}else if("中山".equals(city)){
areaList.add("AA");
areaList.add("BB");
}else if("长沙".equals(city)){
areaList.add("CC");
areaList.add("DD");
}else if("株洲".equals(city)){
areaList.add("EE");
areaList.add("FF");
}
return areaList;
}
}
public class ProvinceCityAreaAction extends ActionSupport{
//业务层
private ProvinceCityAreaService provinceCityAreaService = new ProvinceCityAreaService();
//Bean是实体，封装省份和城市
private Bean bean;
public Bean getBean() {
return bean;
}
public void setBean(Bean bean) {
this.bean = bean;
}
/**
* 根据省份查询城市
*/
public String findCityByProvince() throws Exception{
cityList = provinceCityAreaService.findCityByProvince(bean.getProvince());
//将List集合转成JSON文本
return SUCCESS;
}
/**
* 根据城市查询区域
*/
public String findAreaByCity() throws Exception{
areaList = provinceCityAreaService.findAreaByCity(bean.getCity());
//将List集合转成JSON文本
return SUCCESS;
}
private List cityList;//需要转成JSON的集合，且为其设置值
private List areaList;//需要转成JSON的集合，且为其设置值
public List getCityList() {
//插件会调用getXxx()方法来获取需要转成JSON的集合
return cityList;
}
public List getAreaList() {
return areaList;
}
}
<%@ page language="java" pageEncoding="UTF-8"%>
省份-城市-区域三级联动
二、数据库分页【Servlet + JDBC + Oracle】
① Emp.java
public class Emp {
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 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;
}
@Override
public String toString() {
return this.empno+":"+this.ename+":"+this.sal+":"+this.hiredate+":"+this.deptno;
}
}
② c3p0-config.xml
oracle.jdbc.driver.OracleDriver
jdbc:oracle:thin:@127.0.0.1:1521:orcl
scott
tiger
5
5
1
2
③ IEmpDao.java
/**
* 员工管理模块
* 持久层接口
*/
public interface IEmpDao {
/**
* 获取总记录数
* @return 总记录数
*/
public Integer getAllRecord() throws Exception;
/**
* 分批查询所有记录
* @param start 表示 从第几条记录开始
* @param end 表示 到第几条记录结束
* @return 表示 start到end之间的记录集合，包含start和end
*/
public List findAllRecord(int start,int end) throws Exception;
}
④ JdbcUtil.java
public class JdbcUtil {
/**
* 加载src目录下的c3p0-config.xml文件
*/
private static ComboPooledDataSource dataSource = new ComboPooledDataSource();
/**
* 获取数据源
* @return 数据源
*/
public static ComboPooledDataSource getDataSource() {
return dataSource;
}
}
⑤ EmpDao.java
/**
* 员工管理模块
* 持久层实现
*/
public class EmpDao implements IEmpDao{
public Integer getAllRecord() throws Exception {
QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());
String sql = "SELECT COUNT(EMPNO) FROM EMP";
BigDecimal bigDecimal = (BigDecimal) runner.query(sql,new ScalarHandler());
return bigDecimal.intValue();
}
public List findAllRecord(int start, int end) throws Exception {
QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());
String sql = " SELECT XX.EMPNO,XX.ENAME,XX.JOB,XX.MGR,XX.HIREDATE,XX.SAL,XX.COMM,XX.DEPTNO" +
" FROM (SELECT ROWNUM ID,EMP.* FROM EMP WHERE ROWNUM?";
Object[] params = {end,start};
return runner.query(sql,new BeanListHandler(Emp.class),params);
}
public static void main(String[] args) throws Exception{
EmpDao dao = new EmpDao();
System.out.println("共有" + dao.getAllRecord() + "个员工");
System.out.println("------------------------------------------------第1页");
for(Emp e : dao.findAllRecord(0,4)){
System.out.println(e);
}
System.out.println("------------------------------------------------第2页");
for(Emp e : dao.findAllRecord(3,7)){
System.out.println(e);
}
System.out.println("------------------------------------------------第3页");
for(Emp e : dao.findAllRecord(6,10)){
System.out.println(e);
}
System.out.println("------------------------------------------------第4页");
for(Emp e : dao.findAllRecord(9,13)){
System.out.println(e);
}
System.out.println("------------------------------------------------第5页");
for(Emp e : dao.findAllRecord(12,16)){
System.out.println(e);
}
}
}
⑥ Page.java
public class Page {
private Integer currPageNO;//当前页号OK
private Integer perPageSize = 9;//每页显示记录数，默认为3条记录OK
private Integer allRecordNO;//总记录数OK
private Integer allPageNO;//总页号OK
private List empList = new ArrayList();//该本页显示的内容OK
public Page(){}
public Integer getCurrPageNO() {
return currPageNO;
}
public void setCurrPageNO(Integer currPageNO) {
this.currPageNO = currPageNO;
}
public Integer getPerPageSize() {
return perPageSize;
}
public void setPerPageSize(Integer perPageSize) {
this.perPageSize = perPageSize;
}
public Integer getAllRecordNO() {
return allRecordNO;
}
public void setAllRecordNO(Integer allRecordNO) {
this.allRecordNO = allRecordNO;
}
public Integer getAllPageNO() {
return allPageNO;
}
public void setAllPageNO(Integer allPageNO) {
this.allPageNO = allPageNO;
}
public List getEmpList() {
return empList;
}
public void setEmpList(List empList) {
this.empList = empList;
}
}
⑦ IEmpService.java
/**
* 员工管理模块
* 业务层接口
*/
public interface IEmpService {
/**
* 根据页号获取该页需要显示的内容
* @param currPageNO 当前页号
* @return 封装该页需要显示的内容
*/
public Page show(int currPageNO) throws Exception;
}
⑧ EmpService.java
/**
* 员工管理模块
* 业务层实现
*/
public class EmpService implements IEmpService{
private IEmpDao iEmpDao = new EmpDao();
public Page show(int currPageNO) throws Exception {
Page page = new Page();
//封装当前页号
page.setCurrPageNO(currPageNO);
//封装总记录数
Integer allRecordNO = iEmpDao.getAllRecord();
page.setAllRecordNO(allRecordNO);
//封装总页数
Integer allPageNO = null;
if(page.getAllRecordNO() % page.getPerPageSize() == 0){
allPageNO = page.getAllRecordNO() / page.getPerPageSize();
}else{
allPageNO = page.getAllRecordNO() / page.getPerPageSize() + 1;
}
page.setAllPageNO(allPageNO);
//封装该本显示的内容
Integer start = (page.getCurrPageNO()-1) * page.getPerPageSize();
Integer end = page.getCurrPageNO() * page.getPerPageSize() + 1;
List empList = iEmpDao.findAllRecord(start,end);
page.setEmpList(empList);
return page;
}
public static void main(String[] args) throws Exception{
EmpService service = new EmpService();
System.out.println("---------------------------------------NO1");
Page page = service.show(1);
for(Emp e : page.getEmpList()){
System.out.println(e);
}
System.out.println("---------------------------------------NO2");
page = service.show(2);
for(Emp e : page.getEmpList()){
System.out.println(e);
}
System.out.println("---------------------------------------NO3");
page = service.show(3);
for(Emp e : page.getEmpList()){
System.out.println(e);
}
System.out.println("---------------------------------------NO4");
page = service.show(4);
for(Emp e : page.getEmpList()){
System.out.println(e);
}
System.out.println("---------------------------------------NO5");
page = service.show(5);
for(Emp e : page.getEmpList()){
System.out.println(e);
}
}
}
⑨ EmpServlet.java
/**
* 员工管理模块
* 控制器
*/
public class EmpServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
this.doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
try {
//设置编号方式
request.setCharacterEncoding("UTF-8");
//获取客户端传入的参数
String strPage = request.getParameter("page");//rows
if(strPage == null || strPage.trim().length()==0){
strPage = "1";
}
Integer currPageNO = Integer.parseInt(strPage);
//调用业务层
IEmpService iEmpService = new EmpService();
Page page = iEmpService.show(currPageNO);
//创建Map集合
Map map = new LinkedHashMap();
map.put("total",page.getAllRecordNO());
map.put("rows",page.getEmpList());
//使用第三方工具将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();
}
}
}
⑩ empList.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
分页查询所有员工
三、jQuery-EasyUI入门
1、什么是jQuery-EasyUI
它是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的
WEB后台的前端JavaScript现成的组件库
注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，中低版本浏览器会有不能正常执行的情况
2、JavaScript，AJAX，JSON，jQuery，EasyUI分别能解决什么问题
① JS：基于浏览器对web页面中的节点进行操作，比较麻烦
② jQuery：基于浏览器简化对web页面中的节点进行操作
③ AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式
④ JSON：简化自定义对象的创建与AJAX数据交换轻量级文本
⑤ EasyUI：快速基于现成的组件创建自已的web页面
【组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree… 注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，EasyUI只是众多前端WEB组件之一】
3、jQuery-EasyUI快速入门：可折叠功能的面板
① 创建一个web工程
② 在WebRoot目录下创建base.html
③ 在WebRoot目录下创建js和themes目录，导入官方文件
④ 写一个普通div标签
◇ 提倡为div标签取一个id属性，将来用jquery好定位
◇ 为普通div标签添加easyui组件的样式，所有的easyui组件的样式均按如下格式设置：easyui-组件名
◇ 如果要用easyui组件自身的属性时，必须在普通标签上书写data-options属性名，内容为key:value,key:value，如果value是string类型加引号，外面双引号，则里面单引号
◇ 注意：要在普通标签中书写data-options属性的前提是：在普通标签上加class=“easyui-组件名” ，属性值大小写均可
可折叠功能的面板
可折叠功能的面板
可折叠功能的面板
四、jQuery-EasyUI组件
1、Layout布局
① 通过标签创建布局
② 使用完整页面创建布局
③ 创建嵌套布局
2、Accordion分类
北京
上海
广州
深圳
3、LinkButton按钮
增加部门
4、Tabs选项卡
tab1
tab2
tab3
5、Pagination分页
6、小练习
<%@ page language="java" pageEncoding="UTF-8"%>
练习
7、form表单
① ValidateBox验证框
姓名：
邮箱：
密码：
② ComboBox下拉列表框
城市：
③ DateBox日期输入框
入职时间：
④ NumberSpinner数字微调框
商品数量:
你一共购买了1个商品
⑤ Slider滑动条框
身高：
8、Progressbar进度条
9、函数
10、Window窗口
11、Dialog对话框窗口
增加员工入职时间
12、Messager消息窗口
13、Tree树
-
第一章
-
第一节
-
第一条
-
第二条
-
第二节
-
第二章
动态：
14、Datagrid数据表格
DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数
page：需要显示的页号
rows：需要获取多少条记录