主要内容
1)省份-城市-区域三级联动【struts2 + ajax +非数据库版】
2)查阅文档,使用jQuery-EasyUI组件,构建自已的Web页面(上)
一)省份-城市-区域三级联动【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){}
}
);
JSP
<select id="province">
<option>选择省份</option>
<option>广东</option>
<option>湖南</option>
</select>
<select id="city">
<option>选择城市</option>
</select>
<script type="text/javascript">
$("#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>
Action
<select id="province">
<option>选择省份</option>
<option>广东</option>
<option>湖南</option>
</select>
<select id="city">
<option>选择城市</option>
</select>
<script type="text/javascript">
$("#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>
struts.xml
<struts>
<package name="timePackage" extends="json-default" namespace="/">
<global-results>
<result name="ok" type="json"/>
</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 文件的标签中引入如下文件
<!-- 引入外部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>
第五步:在00-base.html 文件的标签中创建如下
<div
id="p"
class="easyui-panel"
style="width:500px;height:200px;padding:10px;"
title="我的面板"
iconCls="icon-save"
collapsible="true">
内容<br/>
内容<br/>
内容<br/>
内容<br/>
</div>
EasyUI组件
(01)layout布局
<!-- 布局面板 -->
<div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;">
<!-- 区域面板 -->
<div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div>
<div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div>
<div data-options="region:'east',title:'东',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>
<div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>
<div data-options="region:'center',title:'中',iconCls:'icon-reload',href:'/js-day05/06_image.html',collapsible:false" style="padding:5px;background:#eee;"></div>
</div>
<script type="text/javascript">
//浏览器加载web页面时触发
$(function(){
//将北边面板折叠,字符串双引单引均可
$('#cc').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边面板折叠,字符串双引单引均可
$('#cc').layout('collapse','south');
},"3000");
});
</script>
<body class="easyui-layout">
<!-- 北 -->
<div data-options="region:'north'" style="height:150px"></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>
</div>
</div>
</body>
(02)accordion分类
<!-- 容器 -->
<div data-options="border:true,animate:true,multiple:false,selected:-1" id="aa" class="easyui-accordion" style="width:300px;height:500px;">
<!-- 面板 -->
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
内容1
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
内容2
</div>
<div title="Title3" data-options="iconCls:'icon-reload',collapsible:true">
内容3
</div>
</div>
<script type="text/javascript">
$(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 id="btn-add" class="easyui-linkbutton" data-options="iconCls:'icon-add'">
增加
</a>
<a id="btn-find" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
查询
</a>
<a id="btn-update" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">
修改
</a>
<a id="btn-delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">
删除
</a>
<script type="text/javascript">
/*
$("#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">
<!-- 选项卡面板 -->
<div title="Tab1" data-options="closable:true" style="padding:20px">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#tt").tabs("add",{
"title":"Tab4",
"content":"tab4",
"selected":false,
"closable":true
});
});
</script>
<script type="text/javascript">
//定位四个按钮,同时添加单击事件
$("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>
<script type="text/javascript">
$("#pp").pagination({
//pageNumber当前页号,例如1
//pageSize获取多少条记录,例如:5
//以上二个参数,需要谁,就接收谁,不一定二个都同时出现,参数名可以任意
"onSelectPage":function(pageNumber,pageSize){
alert(pageNumber + ":" + pageSize);
}
});
</script>