版权声明：使用本品须Jack Gao同意，违者必究 https://blog.csdn.net/Mr_GaoYang/article/details/84984075
一、省-市-区三级联动【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<String> findCityByProvince(String province) throws Exception{
List<String> cityList = new ArrayList<String>();
if("广东".equals(province)){
cityList.add("广州");
cityList.add("深圳");
cityList.add("中山");
}else if("湖南".equals(province)){
cityList.add("长沙");
cityList.add("株洲");
}
return cityList;
}
/**
* 根据城市查询区域
*/
public List<String> findAreaByCity(String city) throws Exception{
List<String> areaList = new ArrayList<String>();
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<String> cityList;//需要转成JSON的集合，且为其设置值
private List<String> areaList;//需要转成JSON的集合，且为其设置值
public List<String> getCityList() {
//插件会调用getXxx()方法来获取需要转成JSON的集合
return cityList;
}
public List<String> getAreaList() {
return areaList;
}
}
<struts>
<!--
理论：struts2的插件包，就能将Action中的List转成JSON文本
实战：
① 导入struts2-json-plugin-2.3.1.1.jar包到/WEB-INF/lib目录下
② 自已的包继承json-default包，且json-default包继承struts-default包
那么自已的包能用到json-default和struts-default这二个包中的功能
③ 在Action中写一个getXxx()方法返回需要转成JSON字符串的对象
-->
<package name="mypackage" extends="json-default" namespace="/">
<!-- 全局结果 -->
<global-results>
<result name="success" type="json"/>
</global-results>
<!-- 根据省份查询城市 -->
<action
name="findCityRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findCityByProvince">
</action>
<!-- 根据城市查询区域 -->
<action
name="findAreaRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findAreaByCity">
</action>
</package>
</struts>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>省份-城市-区域三级联动</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<select id="province">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
</select>
<select id="city">
<option>选择城市</option>
</select>
<select id="area">
<option>选择区域</option>
</select>
<!-- 省份--城市 -->
<script type="text/javascript">
//定位"省份"下拉框，同时提交change事件
$("#province").change(function(){
//清空城市下拉框中的内容，除第一项外
$("#city option:gt(0)").remove();
//清空区域下拉框中的内容，除第一项外
$("#area option:gt(0)").remove();
//获取选中的省份
var province = $("#province option:selected").text();
//如果不是"选择省份"的话
if("选择省份" != province){
//异步发送请求到服务器
//参数一：url表示请求的路径
var url = "${pageContext.request.contextPath}/findCityRequest?time="+new Date().getTime();
//参数二：sendData表示以JSON格式发送的数据
var sendData = {
"bean.province" : province
};
//参数三：function(){}处理或回调函数
$.post(url,sendData,function(backData,textStatus,ajax){
//测试
//alert( ajax.responseText );
//测试，backData是一个js对象，cityList是属性
var array = backData.cityList;
//数组的长度
var size = array.length;
//迭代数组
for(var i=0;i<size;i++){
//获取数组中的每个元素
var city = array[i];
//创建option元素
var $option = $("<option>"+city+"</option>");
//将option元素添加到城市下拉框中
$("#city").append( $option );
}
});
}
});
</script>
<!-- 城市--区域 -->
<script type="text/javascript">
//定位"城市"下拉框，同时提交change事件
$("#city").change(function(){
//清空区域下拉框中的内容，除第一项外
$("#area option:gt(0)").remove();
//获取选中的城市
var city = $("#city option:selected").text();
//如果不是"选择省份"的话
if("选择城市" != city){
//异步发送请求到服务器
//参数一：url表示请求的路径
var url = "${pageContext.request.contextPath}/findAreaRequest?time="+new Date().getTime();
//参数二：sendData表示以JSON格式发送的数据
var sendData = {
"bean.city" : city
};
//参数三：function(){}处理或回调函数
$.post(url,sendData,function(backData,textStatus,ajax){
//测试
//alert( ajax.responseText );
//测试，backData是一个js对象，cityList是属性
var array = backData.areaList;
//数组的长度
var size = array.length;
//迭代数组
for(var i=0;i<size;i++){
//获取数组中的每个元素
var area = array[i];
//创建option元素
var $option = $("<option>"+area+"</option>");
//将option元素添加到区域下拉框中
$("#area").append( $option );
}
});
}
});
</script>
</body>
</html>
二、数据库分页【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
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<default-config>
<property name="driverClass">oracle.jdbc.driver.OracleDriver</property>
<property name="jdbcUrl">jdbc:oracle:thin:@127.0.0.1:1521:orcl</property>
<property name="user">scott</property>
<property name="password">tiger</property>
<property name="initialPoolSize">5</property>
<property name="maxPoolSize">5</property>
<property name="minPoolSize">1</property>
<property name="acquireIncrement">2</property>
</default-config>
</c3p0-config>
③ IEmpDao.java
/**
* 员工管理模块
* 持久层接口
*/
public interface IEmpDao {
/**
* 获取总记录数
* @return 总记录数
*/
public Integer getAllRecord() throws Exception;
/**
* 分批查询所有记录
* @param start 表示 从第几条记录开始
* @param end 表示 到第几条记录结束
* @return 表示 start到end之间的记录集合，包含start和end
*/
public List<Emp> 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<Emp> 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<?) XX" +
" WHERE ID>?";
Object[] params = {end,start};
return runner.query(sql,new BeanListHandler<Emp>(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<Emp> empList = new ArrayList<Emp>();//该本页显示的内容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<Emp> getEmpList() {
return empList;
}
public void setEmpList(List<Emp> 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<Emp> 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<String,Object> map = new LinkedHashMap<String,Object>();
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"%>
<!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>
<table id="dg" style="width:800px"></table>
<script type="text/javascript">
$("#dg").datagrid({
url : '${pageContext.request.contextPath}/EmpServlet?time=' + new Date().getTime(),
columns : [[
{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,
pageNumber : 1,
pageSize : 9,
pageList : [9],
fit:true
});
</script>
</body>
</html>
三、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-组件名” ，属性值大小写均可
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可折叠功能的面板</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入css文件，无顺序 -->
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<!-- 引入js文件，有顺序 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--
id表示唯一定位这个标签，项目中提倡用id属性
class表示样式，在easyui中，样式都是以easyui-开头，后面跟着组件名，例如：panel
style表示css样式
title表示可折叠功能的面板的标题
collapsible=true可折叠
collapsible=false不可折叠
-->
<div
id="p"
class="easyui-panel"
style="width:500px;height:200px;padding:10px;"
title="我的面板"
data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">
可折叠功能的面板<br/>
可折叠功能的面板<br/>
</div>
</body>
</html>
四、jQuery-EasyUI组件
1、Layout布局
① 通过标签创建布局
<body>
<!-- 布局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
<!-- 区域面板--北边 -->
<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>
<!-- 区域面板--南边 -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 区域面板--东边 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 区域面板--西边 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!-- 区域面板--中间 -->
<div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>
</div>
<script type="text/javascript">
//easyui调用方法的语法如下：$('selector').组件名('method',parameter);
//浏览器加载jsp页面时触发
$(function(){
//将北边折叠
$('#layoutID').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边折叠
$("#layoutID").layout("collapse","south");
//将北边展开
$('#layoutID').layout('expand','north');
window.setTimeout(function(){
//将南边展开
$("#layoutID").layout("expand","south");
},3000);
},3000);
});
</script>
</body>
② 使用完整页面创建布局
<body class="easyui-layout">
<!-- 区域面板--北边 -->
<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>
<!-- 区域面板--南边 -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 区域面板--东边 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 区域面板--西边 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!-- 区域面板--中间 -->
<div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>
<script type="text/javascript">
//easyui调用方法的语法如下：$('selector').组件名('method',parameter);
//浏览器加载jsp页面时触发
$(function(){
//将北边折叠
$('#layoutID').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边折叠
$("#layoutID").layout("collapse","south");
//将北边展开
$('#layoutID').layout('expand','north');
window.setTimeout(function(){
//将南边展开
$("#layoutID").layout("expand","south");
},3000);
},3000);
});
</script>
</body>
③ 创建嵌套布局
<body>
<div id="layoutID" class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 西 -->
<div data-options="region:'west'" style="width:200px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'"></div>
</div>
</div>
</div>
</div>
</div>
</body>
2、Accordion分类
<body>
<!-- 容器 -->
<div
id="accordionID"
class="easyui-accordion"
data-options="fit:false,border:true,animate:true,multiple:false,selected:-1"
style="width:300px;height:400px;">
<!-- 面板 -->
<div title="标题1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
北京
</div>
<div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">
上海
</div>
<div title="标题3">
广州
</div>
<div title="标题4" data-options="collapsible:true">
深圳
</div>
</div>
<script type="text/javascript">
//当浏览器加载web页面时触发
$(function(){
//增加一个面板
//$('selector').plugin('method', parameter);
$("#accordionID").accordion("add",{
"title" : "标题5",
"iconCls" : "icon-add",
"content" : "武汉",
"selected" : false
});
//休息3秒
window.setTimeout(function(){
//移除标题1面板
$("#accordionID").accordion("remove",0);
//取消面板2选中
$("#accordionID").accordion("unselect",0);
//面板3选中
$("#accordionID").accordion("select",1);
},3000);
});
</script>
</body>
3、LinkButton按钮
<body>
<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>
<script type="text/javascript">
//定位4个按钮
$("a").click(function(){
//获取你所单击的按钮的标题
var title = $(this).text();
//去空格
title = $.trim(title);
//显示
alert(title);
});
</script>
</body>
4、Tabs选项卡
<body>
<!-- 容器 -->
<div
id="tabsID"
class="easyui-tabs"
style="width:500px;height:250px;"
data-options="plain:false,fit:false,border:true,tools:[
{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},
{
iconCls:'icon-save',
handler:function(){
alert('保存')
}
}
],selected:-1">
<!-- 选项卡 -->
<div title="标题1" style="padding:20px">
tab1<br/>
</div>
<div title="标题2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="标题3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
</body>
5、Pagination分页
<body>
<!-- 静态方式创建pagination（使用标签创建分页控件）
<div
id="paginationID"
class="easyui-pagination"
data-options="total:2000,pageSize:10"
style="background:#efefef;border:1px solid #ccc;"></div>
-->
<div
id="paginationID"
style="background:#efefef;border:1px solid #ccc;width:800px">
</div>
<!-- 使用Javascript创建分页控件 -->
<script type="text/javascript">
//total表示总记录数
//pageSize表示每页显示多少条记录
//pageNumber表示当前页号
//pageList表示可供选择的每页显示多少条记录，pageSize变量的值必须属性pageList集合中的值之一
$("#paginationID").pagination({
"total" : 100,
"pageSize" : 10,
"pageNumber" : 1,
"pageList" : [10,20],
"layout" : ['list','sep','first','prev','manual','next','last','links']
});
</script>
<script type="text/javascript">
$("#paginationID").pagination({
"onSelectPage" : function(pageNumber,b){
alert("pageNumber=" + pageNumber);
alert("pageSize=" + b);
}
});
</script>
</body>
6、小练习
<%@ 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="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.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;">
人事管理
</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,
"href" : "${pageContext.request.contextPath}/03_addGroup.jsp",
"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>
</body>
</html>
7、form表单
① ValidateBox验证框
<body>
<div style="margin:200px"></div>
姓名：<input id="nameID"/><p/>
<script type="text/javascript">
$("#nameID").validatebox({
required : true,
validType : ['length[1,6]','zhongwen']
});
</script>
<script type="text/javascript">
//自定义规则：zhongwen
$.extend($.fn.validatebox.defaults.rules, {
//zhongwen规则名
zhongwen: {
//validator验证体
//value表示用户在文本框中输入的内容
validator: function(value){
//如果符合中文规则
if(/^[\u3220-\uFA29]*$/.test(value)){
return true;
}
},
//如果不符合中文规则，以下就是提示信息
message: '姓名必须为中文'
}
});
</script>
邮箱：<input id="emailID"/><p/>
<script type="text/javascript">
$("#emailID").validatebox({
required : true,
validType : ['length[1,30]','email']
});
</script>
密码：<input id="passwordID"/><p/>
<script type="text/javascript">
$("#passwordID").validatebox({
required : true,
validType : ['length[6,6]','english']
});
</script>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
english: {
validator: function(value){
if(/^[a-zA-Z]*$/.test(value)){
return true;
}
},
message: '密码必须为英文'
}
});
</script>
</body>
② ComboBox下拉列表框
<body>
<!--
城市：
<select id="cityID" class="easyui-combobox" name="city" style="width:200px;">
<option>aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>citem4</option>
<option>citem5</option>
<option>citem4</option>
<option>ditem5</option>
<option>ditem4</option>
<option>ditem5</option>
<option>ditem4</option>
<option>ditem5</option>
<option>eitem4</option>
<option>eitem5</option>
</select>
-->
城市：
<input id="cityID" name="city"/>
<script type="text/javascript">
//url表示请求的路径
//valueField表示传到服务器的值，看不见的
//textField表示页面中显示的值，看得见
$("#cityID").combobox({
url : "../json/city.json",
valueField :"id",
textField : "name"
});
</script>
<script type="text/javascript">
$(function(){
//为下拉组合框设置值
$("#cityID").combobox("setValue","长沙");
});
</script>
</body>
③ DateBox日期输入框
<body>
入职时间：
<input id="dd" type="text"/>
<script type="text/javascript">
$("#dd").datebox({
required : true
});
</script>
<script type="text/javascript">
$("#dd").datebox({
onSelect : function(mydate){
var year = mydate.getFullYear();
var month = mydate.getMonth() + 1;
var date = mydate.getDate();
alert(year+ "年" + month + "月" + date + "日");
}
});
</script>
</body>
④ NumberSpinner数字微调框
<body>
商品数量:
<input id="ss" style="width:80px;">
<script type="text/javascript">
$("#ss").numberspinner({
min : 1,
max : 100,
value : 1
});
</script>
<p/>
你一共购买了<span id="num">1</span>个商品
<script type="text/javascript">
$("#ss").numberspinner({
onSpinUp : function(){
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
},
onSpinDown : function(){
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>
<script type="text/javascript">
$("#ss").keyup(function(xxx){
//将浏览器产生的事件对象设置到myevent变量中
var myevent = xxx;
//获取按键的unicode编码
var code = myevent.keyCode;
//如果按钮是回车
if(code == 13){
//获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可
var value = $(this).val();
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>
</body>
⑤ Slider滑动条框
<body>
<div style="margin:100px">
身高：<span id="tip"></span>
<p/>
<div id="ss" style="height:400px;width:600px"></div>
</div>
<script type="text/javascript">
$("#ss").slider({
mode : "v",
min : 150,
max : 190,
rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
showTip : true,
value : 150
});
</script>
<script type="text/javascript">
$("#ss").slider({
onChange : function(newValue){
if(newValue == 160){
$("#tip").text("合格").css("color","blue");
}else if(newValue == 170){
$("#tip").text("良好").css("color","green");
}else if(newValue == 180){
$("#tip").text("优秀").css("color","pink");
}else if(newValue == 190){
$("#tip").text("卓越").css("color","red");
}
}
});
</script>
</body>
8、Progressbar进度条
<body>
<div id="p" style="width:400px;"></div>
<script type="text/javascript">
$("#p").progressbar({
width : 1300,
height : 100,
value : 0
});
</script>
<input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>
<script type="text/javascript">
//获取1到9之间的随机数，包含1和9
function getNum(){
return Math.floor(Math.random()*9)+1;
}
</script>
<script type="text/javascript">
var timeID = null;
//函数
function update(){
//获取随机值,例如：3
var num = getNum();
//获取进度条当前值，例如：99
var value = $("#p").progressbar("getValue");
//判断
if(value + num > 100){
//强行设置进度条的当前值为100
$("#p").progressbar("setValue",100);
//停止定时器
window.clearInterval(timeID);
//按钮正效
$("#startID").removeAttr("disabled");
}else{
//设置进度条的当前值为num+value的和
$("#p").progressbar("setValue",(value+num));
}
}
//定拉按钮，同时提供单击事件
$("#startID").click(function(){
//每隔300毫秒执行update方法
timeID = window.setInterval("update()",300);
//按钮失效
$(this).attr("disabled","disabled");
});
</script>
</body>
9、函数
<body>
<script type="text/javascript">
//正常方式
function mysum(num1,num2){
return num1 + num2;
}
</script>
<script type="text/javascript">
//构造器方式
var yousum = new Function("num1","num2","return num1+num2;");
alert( yousum(100,200) );
</script>
<script type="text/javascript">
//定义对象
function Person(id,name,sal){
this.id = id;
this.name = name;
this.sal = sal;
this.run = function(){
alert(this.name + "在跑");
},
this.eat = function(){
alert(this.name + "在吃");
}
}
var p = new Person(1,"哈哈",7000);
document.write(p.id + "<br/>");
document.write(p.name + "<br/>");
document.write(p.sal + "<br/>");
//p.run();
//p.eat();
</script>
</body>
10、Window窗口
<body>
<input type="button" value="打开窗口1" id="open1"/>
<input type="button" value="关闭窗口1" id="close1"/>
<div style="margin:600px"></div>
<div id="window1"></div>
<script type="text/javascript">
//定位打开窗口1按钮，同时添加单击事件
$("#open1").click(function(){
//打开窗口1
$("#window1").window({
title : "窗口1",
width : 840,
height : 150,
left : 200,
top : 100,
minimizable : false,
maximizable : false,
collapsible : false,
closable : false,
draggable : false,
resizable : true,
href : "/js-day06/empList.jsp"
});
});
</script>
<script type="text/javascript">
//定位关闭窗口1按钮，同时添加单击事件
$("#close1").click(function(){
//关闭窗口1
$("#window1").window("close");
});
</script>
</body>
11、Dialog对话框窗口
<body>
<input type="button" value="打开窗口1" id="open1"/>
<input type="button" value="关闭窗口1" id="close1"/>
<div style="margin:600px"></div>
<div id="window1"></div>
<script type="text/javascript">
//定位打开窗口1按钮，同时添加单击事件
$("#open1").click(function(){
//打开窗口1
$("#window1").window({
title : "窗口1",
width : 840,
height : 150,
left : 200,
top : 100,
minimizable : false,
maximizable : false,
collapsible : false,
closable : false,
draggable : false,
resizable : true,
href : "/js-day06/empList.jsp"
});
});
</script>
<script type="text/javascript">
//定位关闭窗口1按钮，同时添加单击事件
$("#close1").click(function(){
//关闭窗口1
$("#window1").window("close");
});
</script>
</body>
增加员工入职时间
<body>
<form>
<table border="2" align="center">
<tr>
<th>姓名：</th>
<td><input id="nameID" type="text"/></td>
</tr>
<tr>
<th>入职时间：</th>
<td><input id="dateID" type="text"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
$("#nameID").validatebox({
required : true,
validType : ['length[1,6]','zhongwen']
});
</script>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
zhongwen: {
validator: function(value){
if(/^[\u3220-\uFA29]*$/.test(value)){
return true;
}
},
message: '姓名必须为中文'
}
});
</script>
<script type="text/javascript">
$("#dateID").datebox({
required : true
});
</script>
</body>
12、Messager消息窗口
<body>
<input type="button" value="警告框"/><br/>
<input type="button" value="确认框"/><br/>
<input type="button" value="输入框"/><br/>
<input type="button" value="显示框"/><br/>
<div style="margin:100px"></div>
<script type="text/javascript">
//定位所有的button按钮，同时提供单击事件
$(":button").click(function(){
//获取value属性值
var tip = $(this).val();
//去空格
tip = $.trim(tip);
//如果警告框的话
if("警告框" == tip){
$.messager.alert("警告框","继续努力","warning",function(){
alert("关闭");
});
}else if("确认框" == tip){
$.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){
alert(value);
});
}else if("输入框" == tip){
$.messager.prompt("输入框","你期希的月薪是多少?",function(sal){
if(sal == undefined){
alert("请输入月薪");
}else{
if(sal<6000){
alert("你的谦虚了");
}else if(sal < 7000){
alert("你加点油了");
}else{
alert("你很不错了");
}
}
});
}else if("显示框" == tip){
$.messager.show({
showType : "slide",
showSpeed : 500,
width : 300,
height : 300,
title : "显示框",
msg : "这是内容",
timeout : 5000
});
}
});
</script>
</body>
13、Tree树
<body>
<ul id="treeID" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一节</span>
<ul>
<li>
<span>第一条</span>
</li>
<li>
<span>第二条</span>
</li>
</ul>
</li>
<li>
<span>第二节</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
<script type="text/javascript">
$(function(){
//收起所有的选项
$("#treeID").tree("collapseAll");
});
</script>
</body>
动态：
<body>
<ul id="treeID"></ul>
<script type="text/javascript">
$("#treeID").tree({
url : "/js-day06/json/pro.json"
});
</script>
</body>
14、Datagrid数据表格
DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数
page：需要显示的页号
rows：需要获取多少条记录