主要内容 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>