jQuery-EasyUI组件(上)

最新推荐文章于 2021-03-13 04:02:01 发布
原创最新推荐文章于 2021-03-13 04:02:01 发布 · 505 阅读
CC 4.0 BY-SA版权
本文介绍如何使用Struts2结合AJAX实现省份-城市-区域三级联动功能，并利用jQuery EasyUI组件库快速构建Web页面。涵盖AJAX请求处理、页面元素动态更新及EasyUI各组件如布局、面板、按钮等的使用方法。
要求
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){}
            }
        );
        注意：上面的每个key值不能乱写 
	<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>
        
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":["邵阳","浏阳"]
	 * 				  }
	 */
}
        
<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 文件的<head>标签中引入如下文件
  	<!-- 引入外部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 文件的<body>标签中创建如下<div>标签
	<div 
		id="p" 
		class="easyui-panel" 
		style="width:500px;height:200px;padding:10px;"   
        title="我的面板" 
        iconCls="icon-save" 
        collapsible="true">   
	    内容<br/>
	    内容<br/>
	    内容<br/>
	    内容<br/>
	</div>

   （5）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>

1）体验EasyUI各组件的开发（注：一定要亲自动手练习，查文档，学会使用方法）