一、省-市-区三级联动【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>
< >省份-城市-区域三级联动</ >
< type=\"text/ \" src=\"js/jquery-1.8.2.js\"></ >
</head>
<body>
<select id=\"province\">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
</select>
<select id=\"city\">
<option>选择城市</option>
</select>
<select id=\"area\">
<option>选择区域</option>
</select>
<!-- 省份--城市 -->
< type=\"text/ \">
//定位\"省份\"下拉框，同时提交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 );
}
});
}
});
</ >
<!-- 城市--区域 -->
< type=\"text/ \">
//定位\"城市\"下拉框，同时提交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 );
}
});
}
});
</ >
</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.
<? 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. 文件
*/
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>?\";
[] 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, > map = new edHashMap<String, >();
map.put(\"total\",page.getAllRecordNO());
map.put(\"rows\",page.getEmpList());
//使用第三方工具将map转成json文本
JSONArray jsonArray = JSONArray.from (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>
< >分页查询所有员工</ >
< rel=\"stylesheet\" href=\"${pageContext.request.contextPath}/themes/default/easyui.css\" type=\"text/css\"></ >
< rel=\"stylesheet\" href=\"${pageContext.request.contextPath}/themes/icon.css\" type=\"text/css\"></ >
< type=\"text/ \" src=\"${pageContext.request.contextPath}/js/jquery.min.js\"></ >
< type=\"text/ \" src=\"${pageContext.request.contextPath}/js/jquery.easyui.min.js\"></ >
< type=\"text/ \" src=\"${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js\"></ >
</head>
<body>
<table id=\"dg\" style=\"width:800px\"></table>
< type=\"text/ \">
$(\"#dg\").datagrid({
url : \'${pageContext.request.contextPath}/EmpServlet?time=\' + new Date().getTime(),
columns : [[
{field:\'empno\', :\'编号\',width:100},
{field:\'ename\', :\'姓名\',width:100},
{field:\'job\', :\'工作\',width:100},
{field:\'mgr\', :\'上编\',width:100},
{field:\'hiredate\', :\'入时\',width:100},
{field:\'sal\', :\'月薪\',width:100},
{field:\'comm\', :\'佣金\',width:100},
{field:\'deptno\', :\'部编\',width:100}
]],
fitColumns : true,
singleSelect : true,
pagination : true,
pageNumber : 1,
pageSize : 9,
pageList : [9],
fit:true
});
</ >
</body>
</html>
三、jQuery-EasyUI入门
1、什么是jQuery-EasyUI
它是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的
WEB后台的前端 现成的组件库
注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，中低版本浏览器会有不能正常执行的情况
2、 ，AJAX，JSON，jQuery，EasyUI分别能解决什么问题
① JS：基于浏览器对web页面中的节点进行操作，比较麻烦
② jQuery：基于浏览器简化对web页面中的节点进行操作
③ AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式
④ JSON：简化自定义对象的创建与AJAX数据交换轻量级文本
⑤ EasyUI：快速基于现成的组件创建自已的web页面
【组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree… 注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，EasyUI只是众多前端WEB组件之一】
3、jQuery-EasyUI快速入门：可折叠功能的面板
① 创建一个web工程
② 在WebRoot目录下创建 .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>
< >可折叠功能的面板</ >
< http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
<!-- 引入css文件，无顺序 -->
< rel=\"stylesheet\" href=\"themes/icon.css\" type=\"text/css\"></ >
< rel=\"stylesheet\" href=\"themes/default/easyui.css\" type=\"text/css\"></ >
<!-- 引入js文件，有顺序 -->
< type=\"text/ \" src=\"js/jquery.min.js\"></ >
< type=\"text/ \" src=\"js/jquery.easyui.min.js\"></ >
</head>
<body>
<!--
id表示唯一定位这个标签，项目中提倡用id属性
class表示样式，在easyui中，样式都是以easyui-开头，后面跟着组件名，例如：panel
style表示css样式
表示可折叠功能的面板的标题
collapsible=true可折叠
collapsible=false不可折叠
-->
<div
id=\"p\"
class=\"easyui-panel\"
style=\"width:500px;height:200px;padding:10px;\"
=\"我的面板\"
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\', :\'北边\',split:true,border:true,iconCls:\'icon-remove\',collapsible:true\" style=\"height:100px;\"></div>
<!-- 区域面板--南边 -->
<div data-options=\"region:\'south\', :\'South \',split:true\" style=\"height:100px;\"></div>
<!-- 区域面板--东边 -->
<div data-options=\"region:\'east\',iconCls:\'icon-reload\', :\'East\',split:true\" style=\"width:100px;\"></div>
<!-- 区域面板--西边 -->
<div data-options=\"region:\'west\', :\'West\',split:true\" style=\"width:100px;\"></div>
<!-- 区域面板--中间 -->
<div data-options=\"region:\'center\', :\'中间\',href:\'/js-day05/images/mm.html\'\" style=\"padding:5px;background:#eee;\"></div>
</div>
< type=\"text/ \">
//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);
});
</ >
</body>
② 使用完整页面创建布局
<body class=\"easyui-layout\">
<!-- 区域面板--北边 -->
<div data-options=\"region:\'north\', :\'北边\',split:true,border:true,iconCls:\'icon-remove\',collapsible:true\" style=\"height:100px;\"></div>
<!-- 区域面板--南边 -->
<div data-options=\"region:\'south\', :\'South \',split:true\" style=\"height:100px;\"></div>
<!-- 区域面板--东边 -->
<div data-options=\"region:\'east\',iconCls:\'icon-reload\', :\'East\',split:true\" style=\"width:100px;\"></div>
<!-- 区域面板--西边 -->
<div data-options=\"region:\'west\', :\'West\',split:true\" style=\"width:100px;\"></div>
<!-- 区域面板--中间 -->
<div data-options=\"region:\'center\', :\'中间\',href:\'/js-day05/images/mm.html\'\" style=\"padding:5px;background:#eee;\"></div>
< type=\"text/ \">
//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);
});
</ >
</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 =\"标题1\" data-options=\"iconCls:\'icon-save\'\" style=\"overflow:auto;padding:10px;\">
北京
</div>
<div =\"标题2\" data-options=\"iconCls:\'icon-reload\'\" style=\"padding:10px;\">
上海
</div>
<div =\"标题3\">
广州
</div>
<div =\"标题4\" data-options=\"collapsible:true\">
深圳
</div>
</div>
< type=\"text/ \">
//当浏览器加载web页面时触发
$(function(){
//增加一个面板
//$(\'selector\').plugin(\'method\', parameter);
$(\"#accordionID\").accordion(\"add\",{
\" \" : \"标题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);
});
</ >
</body>
3、 Button按钮
<body>
<a
id=\"btn_add\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-add\'\">增加部门</a><p>
<a
id=\"btn_find\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-search\'\">查询部门</a><p>
<a
id=\"btn_update\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-edit\'\">修改部门</a><p>
<a
id=\"btn_delete\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-remove\'\">删除部门</a><p>
< type=\"text/ \">
//定位4个按钮
$(\"a\").click(function(){
//获取你所单击的按钮的标题
var = $(this).text();
//去空格
= $.trim( );
//显示
alert( );
});
</ >
</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 =\"标题1\" style=\"padding:20px\">
tab1<br/>
</div>
<div =\"标题2\" data-options=\"closable:true\" style=\"overflow:auto;padding:20px;\">
tab2
</div>
<div =\"标题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>
<!-- 使用 创建分页控件 -->
< type=\"text/ \">
//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\',\' s\']
});
</ >
< type=\"text/ \">
$(\"#paginationID\").pagination({
\" Page\" : function(pageNumber,b){
alert(\"pageNumber=\" + pageNumber);
alert(\"pageSize=\" + b);
}
});
</ >
</body>
6、小练习
<%@ page language=\"java\" pageEncoding=\"UTF-8\"%>
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
< >练习</ >
<!-- 引入css文件，不限顺序 -->
< rel=\"stylesheet\" href=\"themes/default/easyui.css\" type=\"text/css\"></ >
< rel=\"stylesheet\" href=\"themes/icon.css\" type=\"text/css\"></ >
<!-- 引入js文件，有顺序限制 -->
< type=\"text/ \" src=\"js/jquery.min.js\"></ >
< type=\"text/ \" src=\"js/jquery.easyui.min.js\"></ >
</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 =\"部门管理\" data-options=\"iconCls:\'icon-save\'\" style=\"padding:10px;\">
<!-- button按钮 -->
<a
id=\"btn_add\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-add\'\">增加部门</a><p>
<a
id=\"btn_find\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-search\'\">查询部门</a><p>
<a
id=\"btn_update\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-edit\'\">修改部门</a><p>
<a
id=\"btn_delete\"
href=\"#\"
class=\"easyui- button\"
data-options=\"iconCls:\'icon-remove\'\">删除部门</a><p>
</div>
<div =\"人事管理\" data-options=\"iconCls:\'icon-reload\'\" style=\"padding:10px;\">
人事管理
</div>
<div =\"客户管理\" data-options=\"iconCls:\'icon-reload\'\" style=\"padding:10px;\">
客户管理
</div>
<div =\"权限管理\" data-options=\"iconCls:\'icon-reload\'\" style=\"padding:10px;\">
权限管理
</div>
<div =\"报表管理\" data-options=\"iconCls:\'icon-print\'\" style=\"padding:10px;\">
报表管理
</div>
<div =\"帮助\" 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>
< type=\"text/ \">
//定位4个按钮
$(\"a\").click(function(){
//获取你所单击的按钮的标题
var = $(this).text();
//去空格
= $.trim( );
//如果 变量是\"增加部门\"
if(\"增加部门\" == ){
//查看该选项卡是否已经打开
var flag = $(\"#tabsID\").tabs(\"exists\", );
//如果未打开
if(!flag){
//打开选项卡
$(\"#tabsID\").tabs(\"add\",{
\" \" : ,
\"closable\" : true,
\"href\" : \"${pageContext.request.contextPath}/03_addGroup.jsp\",
\"iconCls\" : \"icon-add\"
});
}
}else if(\"查询部门\" == ){
var flag = $(\"#tabsID\").tabs(\"exists\", );
if(!flag){
//打开选项卡
$(\"#tabsID\").tabs(\"add\",{
\" \" : ,
\"closable\" : true,
\"content\" : \"文本\",
\"iconCls\" : \"icon-search\"
});
}
}
});
</ >
</body>
</html>
7、form表单
① ValidateBox验证框
<body>
<div style=\"margin:200px\"></div>
姓名：<input id=\"nameID\"/><p/>
< type=\"text/ \">
$(\"#nameID\").validatebox({
required : true,
validType : [\'length[1,6]\',\'zhongwen\']
});
</ >
< type=\"text/ \">
//自定义规则：zhongwen
$.extend($.fn.validatebox.defaults.rules, {
//zhongwen规则名
zhongwen: {
//validator验证体
//value表示用户在文本框中输入的内容
validator: function(value){
//如果符合中文规则
if(/^[\\u3220-\\uFA29]*$/.test(value)){
return true;
}
},
//如果不符合中文规则，以下就是提示信息
message: \'姓名必须为中文\'
}
});
</ >
邮箱：<input id=\"emailID\"/><p/>
< type=\"text/ \">
$(\"#emailID\").validatebox({
required : true,
validType : [\'length[1,30]\',\'email\']
});
</ >
密码：<input id=\"passwordID\"/><p/>
< type=\"text/ \">
$(\"#passwordID\").validatebox({
required : true,
validType : [\'length[6,6]\',\'english\']
});
</ >
< type=\"text/ \">
$.extend($.fn.validatebox.defaults.rules, {
english: {
validator: function(value){
if(/^[a-zA-Z]*$/.test(value)){
return true;
}
},
message: \'密码必须为英文\'
}
});
</ >
</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\"/>
< type=\"text/ \">
//url表示请求的路径
//valueField表示传到服务器的值，看不见的
//textField表示页面中显示的值，看得见
$(\"#cityID\").combobox({
url : \"../json/city.json\",
valueField :\"id\",
textField : \"name\"
});
</ >
< type=\"text/ \">
$(function(){
//为下拉组合框设置值
$(\"#cityID\").combobox(\"setValue\",\"长沙\");
});
</ >
</body>
③ DateBox日期输入框
<body>
入职时间：
<input id=\"dd\" type=\"text\"/>
< type=\"text/ \">
$(\"#dd\").datebox({
required : true
});
</ >
< type=\"text/ \">
$(\"#dd\").datebox({
: function(mydate){
var year = mydate.getFullYear();
var month = mydate.getMonth() + 1;
var date = mydate.getDate();
alert(year+ \"年\" + month + \"月\" + date + \"日\");
}
});
</ >
</body>
④ NumberSpinner数字微调框
<body>
商品数量:
<input id=\"ss\" style=\"width:80px;\">
< type=\"text/ \">
$(\"#ss\").numberspinner({
min : 1,
max : 100,
value : 1
});
</ >
<p/>
你一共购买了<span id=\"num\">1</span>个商品
< type=\"text/ \">
$(\"#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\");
}
});
</ >
< type=\"text/ \">
$(\"#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\");
}
});
</ >
</body>
⑤ Slider滑动条框
<body>
<div style=\"margin:100px\">
身高：<span id=\"tip\"></span>
<p/>
<div id=\"ss\" style=\"height:400px;width:600px\"></div>
</div>
< type=\"text/ \">
$(\"#ss\").slider({
mode : \"v\",
min : 150,
max : 190,
rule : [ 150,\'|\',160,\'|\',170,\'|\',180,\'|\',190 ],
showTip : true,
value : 150
});
</ >
< type=\"text/ \">
$(\"#ss\").slider({
: 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\");
}
}
});
</ >
</body>
8、Progressbar进度条
<body>
<div id=\"p\" style=\"width:400px;\"></div>
< type=\"text/ \">
$(\"#p\").progressbar({
width : 1300,
height : 100,
value : 0
});
</ >
<input id=\"startID\" type=\"button\" value=\"动起来\" style=\"width:111px;height:111px;font-size:33px\"/>
< type=\"text/ \">
//获取1到9之间的随机数，包含1和9
function getNum(){
return Math.floor(Math.random()*9)+1;
}
</ >
< type=\"text/ \">
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\");
});
</ >
</body>
9、函数
<body>
< type=\"text/ \">
//正常方式
function mysum(num1,num2){
return num1 + num2;
}
</ >
< type=\"text/ \">
//构造器方式
var yousum = new Function(\"num1\",\"num2\",\"return num1+num2;\");
alert( yousum(100,200) );
</ >
< type=\"text/ \">
//定义对象
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();
</ >
</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>
< type=\"text/ \">
//定位打开窗口1按钮，同时添加单击事件
$(\"#open1\").click(function(){
//打开窗口1
$(\"#window1\").window({
: \"窗口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\"
});
});
</ >
< type=\"text/ \">
//定位关闭窗口1按钮，同时添加单击事件
$(\"#close1\").click(function(){
//关闭窗口1
$(\"#window1\").window(\"close\");
});
</ >
</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>
< type=\"text/ \">
//定位打开窗口1按钮，同时添加单击事件
$(\"#open1\").click(function(){
//打开窗口1
$(\"#window1\").window({
: \"窗口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\"
});
});
</ >
< type=\"text/ \">
//定位关闭窗口1按钮，同时添加单击事件
$(\"#close1\").click(function(){
//关闭窗口1
$(\"#window1\").window(\"close\");
});
</ >
</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>
< type=\"text/ \">
$(\"#nameID\").validatebox({
required : true,
validType : [\'length[1,6]\',\'zhongwen\']
});
</ >
< type=\"text/ \">
$.extend($.fn.validatebox.defaults.rules, {
zhongwen: {
validator: function(value){
if(/^[\\u3220-\\uFA29]*$/.test(value)){
return true;
}
},
message: \'姓名必须为中文\'
}
});
</ >
< type=\"text/ \">
$(\"#dateID\").datebox({
required : true
});
</ >
</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>
< type=\"text/ \">
//定位所有的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,
: \"显示框\",
msg : \"这是内容\",
timeout : 5000
});
}
});
</ >
</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>
< type=\"text/ \">
$(function(){
//收起所有的选项
$(\"#treeID\").tree(\"collapseAll\");
});
</ >
</body>
动态：
<body>
<ul id=\"treeID\"></ul>
< type=\"text/ \">
$(\"#treeID\").tree({
url : \"/js-day06/json/pro.json\"
});
</ >
</body>
14、Datagrid数据表格
DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数
page：需要显示的页号
rows：需要获取多少条记录
继续阅读与本文标签相同的文章
上一篇 :
ERP系统与战略成本管理
-
充电宝逆袭共享单车，打脸王思聪？大家都打错脸了，事实并非如此
2026-05-19栏目： 教程
-
余承东说到做到，华为开启“全力反击”模式，谷歌始料未及！
2026-05-19栏目： 教程
-
等了 1 个多月，我就自己动手了
2026-05-19栏目： 教程
-
使用 Docker 构建 Nebula Graph 源码
2026-05-19栏目： 教程
-
阿里云服务器机型价格及如何选择？
2026-05-19栏目： 教程