easyUI 学习

）省份-城市-区域三级联动【struts2 + ajax +非数据库版】

（1）省份-城市-区域，基于jQuery的AJAX三级联动，用Struts2整合AJAX【非数据库版】

$.ajax(

{

type:"POST",

url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),

data:{"province":province},

success:function(backData,textStatus,ajax){}

}

);

注意：上面的每个key值不能乱写

</select>

</select>

$("#province").change(function(){

//删除原城市下拉框中的内容，除第一项外

$("#city option:gt(0)").remove();

var province = $("#province option:selected").text();

if("选择省份" != province){

$.ajax({

"type":"POST",

"url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(),

"sendData":{"province":province},

"success":function(backData,textStatus,ajax){

//js对象

var city = backData.cityList;

//jquery对象

var $city = $(city);

//each()

$city.each(function(){

//this表示每个城市

var $option = $("<option>" + this + "</option>");

$("#city").append( $option );

});

}

});

}

});

</script>

public class ProvinceCityAction extends ActionSupport{

private String province;//广东

public void setProvince(String province) {

this.province = province;

}

public String findCityByProvince() throws Exception {

cityList = new ArrayList<String>();

if("广东".equals(province)){

cityList.add("湛江");

cityList.add("汕头");

}else if("湖南".equals(province)){

cityList.add("邵阳");

cityList.add("浏阳");

}

return "ok";

}

private List<String> cityList;

public List<String> getCityList() {

return cityList;

}

/**

* var backData = {

* "cityList":["邵阳","浏阳"]

* }

}

<global-results>

</global-results>

<action

name="loadTimeRequest"

class="cn.itcast.javaee.js.time.TimeAction"

method="loadTimeMethod"/>

<action

name="checkRequest"

class="cn.itcast.javaee.js.register.RegisterAction"

method="checkMethod"/>

<action

name="findCityByProvince"

class="cn.itcast.javaee.js.provincecity.ProvinceCityAction"

method="findCityByProvince"/>

</package>

</struts>

二）学会查阅文档，使用jQuery-EasyUI，构建自已的Web页面

（1）网址：www.jeasyui.com，下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册

（2）什么是jQuery-EasyUI

参见<<什么是EasyUI.JPG>>

是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的

WEB[后台前端]JavaScript现成的组件库

注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，

中低版本浏览器会有不能正常执行的情况

（3）JavaScript，AJAX，JSON，jQuery，EasyUI分别能解决什么问题

JS：基于浏览器对web页面中的节点进行操作，比较麻烦

jQuery：基于浏览器简化对web页面中的节点进行操作，做到了write less do more

AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式

JSON：简化自定义对象的创建与AJAX数据交换轻量级文本

EasyUI：快速基于现成的组件创建自已的web页面

组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree...

注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，

EasyUI只是众多前端WEB组件之一

（4）jQuery-EasyUI快速入门----可折叠功能的面板

第一步：创建一个js-day05这么一个web工程

第二步：在WebRoot目录下创建00-base.html

第三步：在WebRoot目录下创建js和themes目录，导入官方文件

参见<< jquery-easyui-1.3.6文件夹>>

第四步：在00-base.html 文件的<head>标签中引入如下文件

第五步：在00-base.html 文件的<body>标签中创建如下<div>标签

<div

id="p"

class="easyui-panel"

style="width:500px;height:200px;padding:10px;"

title="我的面板"

iconCls="icon-save"

collapsible="true">

内容<br/>

</div>

（5）EasyUI组件

（01） layout布局

</div>

//浏览器加载web页面时触发

$(function(){

//将北边面板折叠，字符串双引单引均可

$('#cc').layout('collapse','north');

//休息3秒

window.setTimeout(function(){

//将南边面板折叠，字符串双引单引均可

$('#cc').layout('collapse','south');

},"3000");

});

</script>

</div>

</body>

（02）accordion分类

内容1

</div>

内容2

</div>

内容3

</div>

$(function(){

//增加一个面板

$("#aa").accordion("add",{

"title":"Title4",

"content":"内容4",

"selected":false,

"iconCls":"icon-search"

});

//休息3秒

window.setTimeout(function(){

//删除4号面板

$("#aa").accordion("remove",3);

//取消选择1号面板

$("#aa").accordion("unselect",0);

},"3000");

});

</script>

（3）linkbutton按钮

增加

</a>

查询

</a>

修改

</a>

删除

</a>

$("#btn-add").click(function(){

//将该按失效

$("#btn-add").linkbutton("disable");

});

$("#btn-add").dblclick(function(){

//将该按失效

$("#btn-add").linkbutton("disable");

});

//参数一：字符串类型的事件，多个事件之间通过空格分隔，事件名称符合jquery事件名写法

//参数二：处理函数

$("#btn-add").bind("click dblclick",function(){

//将该按失效

$("#btn-add").linkbutton("disable");

});

</script>

（04）tabs选项卡

<div

id="tt"

class="easyui-tabs"

style="width:500px;height:250px;"

data-options="plain:false,border:true,tools:[{

iconCls:'icon-add',

handler:function(){

alert('添加')

}

},{

iconCls:'icon-remove',

handler:function(){

alert('删除')

}

}],selected:-1">

tab1

</div>

tab2

</div>

tab3

</div>

$(document).ready(function(){

$("#tt").tabs("add",{

"title":"Tab4",

"content":"tab4",

"selected":false,

"closable":true

});

</script>

//定位四个按钮，同时添加单击事件

$("a").click(function(){

//获取按钮的文本

var tip = $(this).text();

//去空格

tip = $.trim(tip);

//如果是"增加部门"

if("增加部门" == tip){

//是否已有相同的tabs选项卡打开

var flag = $("#tt").tabs("exists",tip);

//如果不存在相同的tabs选项卡打开

if(!flag){

//创建一个tabs选项卡

$("#tt").tabs("add",{

"title":tip,

"href":"${pageContext.request.contextPath}/addGroup.jsp",

"selected":true,

"closable":true

});

}

});

</script>

（05）pagination分页框

<!--

total：记录总数100

pageSize：每页显示多少条记录5

pageNumber：当前页号1

pageList:[5,10,15]表示可供选择中每页显示多少条记录，

注意：pageSize的值必须是pageList数组值之一

-->

<div

id="pp"

class="easyui-pagination"

data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'页'"

style="background:#efefef;border:1px solid #ccc;width:400px">

</div>

$("#pp").pagination({

//pageNumber当前页号，例如1

//pageSize获取多少条记录，例如：5

//以上二个参数，需要谁，就接收谁，不一定二个都同时出现，参数名可以任意

"onSelectPage":function(pageNumber,pageSize){

alert(pageNumber + ":" + pageSize);

}

});

</script>

一）学会查阅文档，使用jQuery-EasyUI，构建自已的Web页面

（1）网址：www.jeasyui.com，下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册

（2）什么是jQuery-EasyUI

参见<<什么是EasyUI.JPG>>

是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的

WEB前端JavaScript现成的组件库

注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，

中低版本浏览器会有不能正常执行的情况

（3）JavaScript，AJAX，JSON，jQuery，EasyUI分别能解决什么问题

JS：基于浏览器对web页面中的节点进行操作，比较麻烦

jQuery：基于浏览器简化对web页面中的节点进行操作，做到了write less do more

AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式

JSON：简化自定义对象的创建与AJAX数据交换轻量级文本

EasyUI：快速基于现成的组件创建自已的web页面

组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree...

注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，

EasyUI只是众多前端WEB组件之一

（4）jQuery-EasyUI快速入门----可折叠功能的面板

第一步：创建一个js-day05这么一个web工程

第二步：在WebRoot目录下创建00-base.html

第三步：在WebRoot目录下创建js和themes目录，导入官方文件

参见<< jquery-easyui-1.3.6文件夹>>

第四步：在00-base.html 文件的<head>标签中引入如下文件

第五步：在00-base.html 文件的<body>标签中创建如下<div>标签

<div

id="p"

class="easyui-panel"

style="width:500px;height:200px;padding:10px;"

title="我的面板"

iconCls="icon-save"

collapsible="true">

内容<br/>

</div>

（5）EasyUI组件

（06）form表单

》validatebox验证框

姓名：必填/1-6个字符/必填中文

邮箱：必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn

用户名:

$("#vv").validatebox({

required:true,

validType:["length[1,4]","zhongwen"]

});

</script>

//自定义验证规则

$.extend($.fn.validatebox.defaults.rules, {

zhongwen : {

validator: function(value){//value表示在文本框中输入的内容

if(/^[\u3220-\uFA29]+$/.test(value)){

return true;

}

message: "用户名必须填中文"

}

});

</script>

思考：检查邮箱的扩展名只能是{'com','cn'}

》combobox下拉列表框

设置下拉列表框默认值

你所在的城市：

<option>aitem1</option>

<option>bitem1</option>

<option>bitem2</option>

<option>citem1</option>

<option>citem2</option>

<option>citem3</option>

<option>ditem1</option>

<option>ditem2</option>

<option>ditem3</option>

<option>ditem4</option>

</select>

$(function(){

$("#cc").combobox("setValue","长沙");

});

</script>

你所在的城市：

$("#cc").combobox({

url:"combobox_data.json",

valueField:"id",

textField:"text"

});

//textField表示在下拉框中看得见的内容,<option>长沙</option>

//valueField表示在下拉框中看不见的内容，用于向后台传递数据<option value="cs">长沙</option>

</script>

combobox_data.json:

[

{

"id":"gz",

"text":"广州"

{

"id":"zs",

"text":"中山"

{

"id":"fs",

"text":"佛山"

{

"id":"sz",

"text":"深圳",

"selected":true

{

"id":"yj",

"text":"阳江"

}

]

》datebox日期选择框

显示yyyy-mm-dd格式，

添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>

选中日期并显示选中的日期

入职时间：<input id="dd" type="text"></input>

$("#dd").datebox({

required:true

});

</script>

$("#dd").datebox({

onSelect:function(date){

alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate());

}

});

</script>

》numberspinner数字微调框

设置数字微调框中的值

获取数字微调框中的值

商品数量：<input type="text" size="2px" value="1"/><span></span>

<hr/>

$("#ss").numberspinner({

value:1,

min:1,

max:100,

editable:true

});

</script>

$("#ss").numberspinner({

onSpinUp:function(){

//获取numberspinner的当前值

var value = $("#ss").numberspinner("getValue");

//将numberspinner的当前值设置到商品数量文本框中

$("input:first").val(value).css("color","red");

//如果value值为100

if( value == 100 ){

$("span:first").html("商品已满，不能再购买了").css("color","blue");

$("input:first").attr("disabled","disabled");

}

onSpinDown:function(){

//获取numberspinner的当前值

var value = $("#ss").numberspinner("getValue");

//将numberspinner的当前值设置到商品数量文本框中

$("input:first").val(value).css("color","red");

//如果value值小于100

if( value < 100 ){

$("span:first").html("");

$("input:first").removeAttr("disabled");

}

});

</script>

》slider滑动条框

拖动滑块，将值同步显示到span标签中

身高：<span>150</span><span id="tip"></span>

<input

id="ss"

class="easyui-slider"

value="0"

style="width:600px;height:500px"

data-options="max:180,min:150,mode:'v',showTip:true,rule:[150,'|',160,'|',170,'|',180]"/>

</div>

$("#ss").slider({

onChange:function(newValue){

$("span:first").text(newValue);

if(newValue == 180){

$("#tip").text("你真高呀");

}else if(newValue >= 170){

$("#tip").text("你不错呀");

}else if(newValue >= 160){

$("#tip").text("你可以呀");

}

});

</script>

（07）progressbar进度条

》每隔1秒让进度条按随机数填充，直至充满进度条刻度

进度条：

$("#p").progressbar({

width:"auto",

height:44,

value:0

});

</script>

var timeID = null;

//随机产生1-9之间的整数，包含1和9

function getNum(){

return Math.floor(Math.random()*9)+1;

}

$(":button").click(function(){

timeID = window.setInterval(function(){

//获取随机数，例如：9

var num = getNum();

//获取进度条当前值，例如：99

var value = $("#p").progressbar("getValue");

//如果随机数加当前值小于100的话

if(value + num < 100){

//填充进度条当前值

$("#p").progressbar("setValue",value+num);

}else{

//将进度条当前值设置为100

$("#p").progressbar("setValue",100);

//停止定时器

window.clearInterval(timeID);

//将"开始"按钮生效

$(":button").removeAttr("disabled");

}

},200);

//将"开始"按钮失效

$(this).attr("disabled","disabled");

});

</script>

（08）window窗口

》单击按钮，打开或关闭一个窗口

<hr/>

$("#open1").click(function(){

$("#win1").window({

title:"我的窗口1",

width:200,

height:300,

top:100,

left:400,

collapsible:false,

minimizable:false,

maximizable:false,

closable:true,

draggable:false,

resizable:false,

shadow:false,

modal:false,

href:"08_datebox.html"

});

$("#open2").click(function(){

$("#win2").window({

title:"我的窗口2",

width:200,

height:300,

top:100,

left:800,

collapsible:false,

minimizable:false,

maximizable:false,

closable:true,

draggable:false,

resizable:false,

shadow:false,

modal:false

});

</script>

（09）dialog对话框

》单击按钮，打开或关闭一个对话框

<hr/>

$("#open1").click(function(){

$("#dd1").dialog({

width:300,

height:400,

left:400,

top:100,

title:"对话框1",

toolbar:[

{

text:'编辑',

iconCls:'icon-edit',

handler:function(){alert('edit')}

{

text:'帮助',

iconCls:'icon-help',

handler:function(){alert('help')}

}

buttons:[

{

text:'确定',

handler:function(){alert('ok')}

{

text:'关闭',

handler:function(){

//关闭本对话框

$("#dd1").dialog("close");

}

href:"07_combobox_2.html"

});

</script>

（10）messager消息窗口

》单击按钮，弹出警告框

》单击按钮，弹出确认框

》单击按钮，弹出显示框

》单击按钮，弹出输入框

<hr/>

$(":button").click(function(){

var tip = $(this).val();

tip = $.trim(tip);

if("警告框" == tip){

$.messager.alert("我的警告框","不能睡觉了","warning");

}else if("确认框" == tip){

$.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){

alert(flag);

});

}else if("输入框" == tip){

$.messager.prompt("我的输入框","你决定要学习Android还是JavaEE吗?",function(value){

alert(value);

});

}else if("显示框" == tip){

$.messager.show({

title:"我的显示框",

msg:"不要太区分Android和JavaEE了",

showType:"fade",

width:200,

height:200,

timeout:1000

});

}

});

</script>

（11）tree树

》选中树中某个子节点，弹出选中的内容　

》用树替代linkButton按钮

<li>

</li>

<li>

<ul>

<li>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

$("#ttt").tree({

url:"tree_data.json",

lines:true

});

</script>

$("#ttt").tree({

onClick:function(node){

alert(node.text);

}

});

</script>

tree_data.json:

[

{

"id":1,

"text":"第一章"

{

"id":2,

"text":"第二章",

"state":"closed",

"children":[

{

"id":21,

"text":"第一节"

{

"id":22,

"text":"第二节"

{

"id":23,

"text":"第三节",

"state":"closed",

"children":[

{

"id":231,

"text":"第一条"

{

"id":232,

"text":"第二条"

}

]

}

]

}

]

（12）datagrid数据表格

》参见E:\开发类库\jquery-easyui-1.3.6\demo\datagrid(9-数据网格)\products.json

》 DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数

* page：需要显示的页号

* rows：需要获取多少条记录

开发过程：

DB：

use js;

drop table if exists users;

create table users(

id int(5) primary key auto_increment,

name varchar(4) not null,

sal int(5) not null

);

insert into users(name,sal) values('小赵君',1000);

insert into users(name,sal) values('中赵君',1500);

insert into users(name,sal) values('大赵君',2000);

insert into users(name,sal) values('赵小君',2500);

insert into users(name,sal) values('赵中君',3000);

insert into users(name,sal) values('赵大君',3500);

insert into users(name,sal) values('赵君小',4000);

insert into users(name,sal) values('赵君中',4500);

insert into users(name,sal) values('赵君大',5000);

insert into users(name,sal) values('赵君',5500);

select id,name,sal from users;

Entity：

public class User {

private Integer id;

private String name;

private Integer sal;

public User(){}

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Integer getSal() {

return sal;

}

public void setSal(Integer sal) {

this.sal = sal;

}

public class PageBean {

private Integer currPageNO;

private Integer perPageNO;

private Integer allRecordNO;

private Integer allPageNO;

private List<User> userList = new ArrayList<User>();

public PageBean(){}

public Integer getCurrPageNO() {

return currPageNO;

}

public void setCurrPageNO(Integer currPageNO) {

this.currPageNO = currPageNO;

}

public Integer getPerPageNO() {

return perPageNO;

}

public void setPerPageNO(Integer perPageNO) {

this.perPageNO = perPageNO;

}

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<User> getUserList() {

return userList;

}

public void setUserList(List<User> userList) {

this.userList = userList;

}

Util：

public class JdbcUtil {

private static ComboPooledDataSource dataSource = new ComboPooledDataSource();

public static ComboPooledDataSource getDataSource() {

return dataSource;

}

src/c3p0-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<c3p0-config>

<default-config>

<property name="driverClass">com.mysql.jdbc.Driver</property>

<property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/js</property>

</default-config>

</c3p0-config>

Dao：

public class UserDao {

//select count(id) from users where 1=1 and name like '%赵%';

public Integer getAllRecordNO(String sql) throws Exception{

QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());

Long temp = (Long) runner.query(sql,new ScalarHandler());

return temp.intValue();

}

//select id,name,sal from users where 1=1 and name like '%赵%' limit ?,?;

public List<User> findAllRecord(String sql,Integer start,Integer size) throws Exception{

QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());

return runner.query(sql,new BeanListHandler<User>(User.class),new Object[]{start,size});

}

Service：

public class UserService {

private UserDao userDao = new UserDao();

//show("赵",2);

public PageBean show(String keywords,Integer currPageNO) throws Exception{

PageBean pageBean = new PageBean();

String sqlA = "select count(id) from users where 1=1";

String sqlB = "select id,name,sal from users where 1=1";

if(keywords != null && keywords.trim().length() > 0){

sqlA += " and name like '%" + keywords + "%'";

sqlB += " and name like '%" + keywords + "%'";

}

pageBean.setCurrPageNO(currPageNO);

Integer allRecordNO = userDao.getAllRecordNO(sqlA);

pageBean.setAllRecordNO(allRecordNO);

Integer allPageNO = null;

if(pageBean.getAllRecordNO() % pageBean.getPageSize() == 0){

allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize();

}else{

allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize() + 1;

}

pageBean.setAllPageNO(allPageNO);

Integer size = pageBean.getPageSize();

Integer start = (pageBean.getCurrPageNO()-1) * size;

sqlB += " limit ?,?";

List<User> userList = userDao.findAllRecord(sqlB,start,size);

pageBean.setUserList(userList);

return pageBean;

}

Action：

public class UserServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

try{

request.setCharacterEncoding("UTF-8");

String keywords = request.getParameter("keywords");

if(keywords==null || keywords.trim().length()==0){

keywords = "";

}

System.out.println("keywords=" + keywords);//赵

String temp = request.getParameter("page");

if(temp == null || temp.trim().length()==0){

temp = "1";

}

Integer currPageNO = Integer.parseInt(temp);

System.out.println("currPageNO=" + currPageNO);//2

UserService userService = new UserService();

PageBean pageBean = userService.show(keywords,currPageNO);

Map<String,Object> map = new LinkedHashMap<String,Object>();

map.put("total",pageBean.getAllRecordNO());

map.put("rows",pageBean.getUserList());

JSONArray jsonArray = JSONArray.fromObject(map);

String jsonJAVA = jsonArray.toString();

jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(jsonJAVA);

pw.flush();

pw.close();

}catch(Exception e){

e.printStackTrace();

}

WebRoot/userList.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

姓名:

function find(){

$("#dg").datagrid("load",{

"keywords" : $.trim( $("#name").val() )

});

}

</script>

$("#dg").datagrid({

width:400,

url:"${pageContext.request.contextPath}/UserServlet",

fitColumns:true,

columns:[[

{field:'id',title:'编号',width:100},

{field:'name',title:'姓名',width:100},

{field:'sal',title:'薪水',width:100}

]],

singleSelect:true,

pagination:true,

pageNumber:1,

pageSize:2,

pageList:[2]

});

</script>

</body>

</html>

猜你喜欢