Java進階學習第三十一天（EasyUI）

阿新 • • 發佈：2018-12-27

一、省-市-區三級聯動【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>
    <title>省份-城市-區域三級聯動</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<select id="province">
		<option>選擇省份</option>
		<option>湖南</option>
		<option>廣東</option>
	</select>

	<select id="city">
		<option>選擇城市</option>
	</select>

	<select id="area">
		<option>選擇區域</option>
	</select>

	<!-- 省份--城市 -->
	<script type="text/javascript">
		//定位"省份"下拉框，同時提交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 );
					}
				});
			}
		});					
	</script>

	<!-- 城市--區域 -->
	<script type="text/javascript">
		//定位"城市"下拉框，同時提交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 );
					}
				});
			}
		});
	</script>
  </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.xml

<?xml 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.xml檔案
	 */
	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>?";
		Object[] 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,Object> map = new LinkedHashMap<String,Object>();
			map.put("total",page.getAllRecordNO());
			map.put("rows",page.getEmpList());
			//使用第三方工具將map轉成json文字
			JSONArray jsonArray = JSONArray.fromObject(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>
    <title>分頁查詢所有員工</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
	<table id="dg" style="width:800px"></table>
	<script type="text/javascript">
		$("#dg").datagrid({
			url : '${pageContext.request.contextPath}/EmpServlet?time=' + new Date().getTime(),    
		    columns : [[    
				        {field:'empno',title:'編號',width:100},    
				        {field:'ename',title:'姓名',width:100},    
				        {field:'job',title:'工作',width:100},    
				        {field:'mgr',title:'上編',width:100},    
				        {field:'hiredate',title:'入時',width:100},    
				        {field:'sal',title:'月薪',width:100},    
				        {field:'comm',title:'佣金',width:100},    
				        {field:'deptno',title:'部編',width:100}   
		    ]],
		    fitColumns : true,
		    singleSelect : true,
		    pagination : true,
		    pageNumber : 1,
		    pageSize : 9,
		    pageList : [9],
		    fit:true
		});
	</script>	
  </body>
</html>

三、jQuery-EasyUI入門

1、什麼是jQuery-EasyUI
它是一種第三方組織開發的一款基於jQuery的，簡單易用的，功能強大的
WEB後臺的前端JavaScript現成的元件庫
注意：今天的EasyUI元件庫的版本較高，需要高版本瀏覽器支援，中低版本瀏覽器會有不能正常執行的情況

2、JavaScript，AJAX，JSON，jQuery，EasyUI分別能解決什麼問題
① JS：基於瀏覽器對web頁面中的節點進行操作，比較麻煩
② jQuery：基於瀏覽器簡化對web頁面中的節點進行操作
③ AJAX：基於瀏覽器與服務端進行區域性重新整理的非同步通訊程式設計模式
④ JSON：簡化自定義物件的建立與AJAX資料交換輕量級文字
⑤ EasyUI：快速基於現成的元件建立自已的web頁面
【元件：是指已經由第三方開源組織寫好的，直接可以使用的功能介面，例如：form，layout，tree… 注意：我們學的都是零散的元件，專案中需要將其裝配起來，方可構建完整的web頁面，EasyUI只是眾多前端WEB元件之一】

3、jQuery-EasyUI快速入門：可摺疊功能的面板
① 建立一個web工程
② 在WebRoot目錄下建立base.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>
    <title>可摺疊功能的面板</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 引入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>
  </head>
  <body>
	<!-- 
		id表示唯一定位這個標籤，專案中提倡用id屬性
		class表示樣式，在easyui中，樣式都是以easyui-開頭，後面跟著元件名，例如：panel
		style表示css樣式
		title表示可摺疊功能的面板的標題
		collapsible=true可摺疊
		collapsible=false不可摺疊
	-->
	<div 
        id="p" 
        class="easyui-panel" 
        style="width:500px;height:200px;padding:10px;"   
        title="我的面板" 
        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',title:'北邊',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   
			<!-- 區域面板--南邊 -->
			<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
			<!-- 區域面板--東邊 -->
			<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
			<!-- 區域面板--西邊 -->
			<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
			<!-- 區域面板--中間 -->
			<div data-options="region:'center',title:'中間',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   	
		</div>
		
		<script type="text/javascript">
			//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);
			});	
		</script>
  </body>

② 使用完整頁面建立佈局

 <body class="easyui-layout">
			<!-- 區域面板--北邊 -->
			<div data-options="region:'north',title:'北邊',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   
			<!-- 區域面板--南邊 -->
			<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
			<!-- 區域面板--東邊 -->
			<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
			<!-- 區域面板--西邊 -->
			<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
			<!-- 區域面板--中間 -->
			<div data-options="region:'center',title:'中間',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   
		
		<script type="text/javascript">
			//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);
			});	
		</script>
  </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 title="標題1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
	       	北京  
	    </div>   
	    <div title="標題2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
	        上海    
	    </div>   
	    <div title="標題3">   
	        廣州    
	    </div> 
	    <div title="標題4" data-options="collapsible:true">   
	        深圳    
	    </div> 
	</div> 

	<script type="text/javascript">
		//當瀏覽器載入web頁面時觸發
		$(function(){
			//增加一個面板
			//$('selector').plugin('method', parameter); 
			$("#accordionID").accordion("add",{
				"title" : "標題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);
		});
	</script>
  </body>

3、LinkButton按鈕

<body>
	<a 
		id="btn_add" 
		href="#" 
		class="easyui-linkbutton" 
		data-options="iconCls:'icon-add'">增加部門</a><p> 
	<a 
		id="btn_find" 
		href="#" 
		class="easyui-linkbutton" 
		data-options="iconCls:'icon-search'">查詢部門</a><p> 
	<a 
		id="btn_update" 
		href="#" 
		class="easyui-linkbutton" 
		data-options="iconCls:'icon-edit'">修改部門</a><p> 
	<a 
		id="btn_delete" 
		href="#" 
		class="easyui-linkbutton" 
		data-options="iconCls:'icon-remove'">刪除部門</a><p>

	<script type="text/javascript">
		//定位4個按鈕
		$("a").click(function(){
			//獲取你所單擊的按鈕的標題
			var title = $(this).text();
			//去空格
			title = $.trim(title);
			//顯示
			alert(title);
		});
	</script>
  </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 title="標題1" style="padding:20px">   
	        tab1<br/>
	    </div>   
	    <div title="標題2" data-options="closable:true" style="overflow:auto;padding:20px;">   
	        tab2    
	    </div>   
	    <div title="標題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> 
	
	<!-- 使用Javascript建立分頁控制元件 -->
	<script type="text/javascript">
		//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','links']
		});
	</script>
	<script type="text/javascript">
		$("#paginationID").pagination({
			"onSelectPage" : function(pageNumber,b){
				alert("pageNumber=" + pageNumber);
				alert("pageSize=" + b);
			}
		});
	</script>
  </body>

6、小練習

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>練習</title>    
<!-- 引入css檔案，不限順序 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.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>
</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 title="部門管理" data-options="iconCls:'icon-save'" style="padding:10px;">   
				       	<!-- Linkbutton按鈕 -->
						<a 
							id="btn_add" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-add'">增加部門</a><p> 
						<a 
							id="btn_find" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-search'">查詢部門</a><p> 
						<a 
							id="btn_update" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-edit'">修改部門</a><p> 
						<a 
							id="btn_delete" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-remove'">刪除部門</a><p>  
				    </div>   
				    <div title="人事管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
				        人事管理    
				    </div>   
				    <div title="客戶管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
				        客戶管理    
				    </div> 
				    <div title="許可權管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
				        許可權管理    
				    </div>
				    <div title="報表管理" data-options="iconCls:'icon-print'" style="padding:10px;">   
				        報表管理    
				    </div> 
				    <div title="幫助" 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>

		<script type="text/javascript">
			//定位4個按鈕
			$("a").click(function(){
				//獲取你所單擊的按鈕的標題
				var title = $(this).text();
				//去空格
				title = $.trim(title);
				//如果title變數是"增加部門"
				if("增加部門" == title){
					//檢視該選項卡是否已經開啟
					var flag = $("#tabsID").tabs("exists",title);
					//如果未開啟
					if(!flag){
						//開啟選項卡
						$("#tabsID").tabs("add",{
							"title" : title,
							"closable" : true,
							"href" : "${pageContext.request.contextPath}/03_addGroup.jsp",
							"iconCls" : "icon-add"
						});
					}
				}else if("查詢部門" == title){
					var flag = $("#tabsID").tabs("exists",title);
					if(!flag){
						//開啟選項卡
						$("#tabsID").tabs("add",{
							"title" : title,
							"closable" : true,
							"content" : "文字",
							"iconCls" : "icon-search"
						});
					}
				}
			});
		</script>
  </body>
</html>

7、form表單
① ValidateBox驗證框

 <body>
	<div style="margin:200px"></div>
	姓名：<input id="nameID"/><p/>
	<script type="text/javascript">
		$("#nameID").validatebox({
			required : true,
			validType : ['length[1,6]','zhongwen']
		});
	</script>
	<script type="text/javascript">
		//自定義規則：zhongwen
		$.extend($.fn.validatebox.defaults.rules, {    
		    //zhongwen規則名
		    zhongwen: {  
		    	//validator驗證體  
		    	//value表示使用者在文字框中輸入的內容
		        validator: function(value){   
		        	//如果符合中文規則 
		        	if(/^[\u3220-\uFA29]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        //如果不符合中文規則，以下就是提示資訊   
		        message: '姓名必須為中文'   
		    }    
		});  
	</script>

	郵箱：<input id="emailID"/><p/>
	<script type="text/javascript">
		$("#emailID").validatebox({
			required : true,
			validType : ['length[1,30]','email']
		});
	</script>

	密碼：<input id="passwordID"/><p/>
	<script type="text/javascript">
		$("#passwordID").validatebox({
			required : true,
			validType : ['length[6,6]','english']
		});
	</script>
	<script type="text/javascript">
		$.extend($.fn.validatebox.defaults.rules, {    
		    english: {  
		        validator: function(value){   
		        	if(/^[a-zA-Z]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        message: '密碼必須為英文'   
		    }    
		});  
	</script>
  </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"/>  
	<script type="text/javascript">
		//url表示請求的路徑
		//valueField表示傳到伺服器的值，看不見的
		//textField表示頁面中顯示的值，看得見
		$("#cityID").combobox({
			url : "../json/city.json",
			valueField :"id",    
   			textField : "name"   
		});
	</script>
	<script type="text/javascript">
		$(function(){
			//為下拉組合框設定值
			$("#cityID").combobox("setValue","長沙");
		});
	</script>	
  </body>

③ DateBox日期輸入框

<body>
	入職時間：
	<input id="dd" type="text"/>
	<script type="text/javascript">
		$("#dd").datebox({
			required : true
		});
	</script>
	<script type="text/javascript">
		$("#dd").datebox({
			onSelect : function(mydate){
				var year = mydate.getFullYear(); 
				var month = mydate.getMonth() + 1;
				var date = mydate.getDate();
				alert(year+ "年" + month + "月" + date + "日");
			}
		});
	</script>	
  </body>

④ NumberSpinner數字微調框

<body>
	商品數量:
	<input id="ss" style="width:80px;"> 
	<script type="text/javascript">
		$("#ss").numberspinner({
			min : 1,
			max : 100,
			value : 1
		});
	</script>
	<p/>
	你一共購買了<span id="num">1</span>個商品

	<script type="text/javascript">
		$("#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");
			}
		});
	</script>

	<script type="text/javascript">
		$("#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");	
			}
		});
	</script>	
  </body>

⑤ Slider滑動條框

<body>
	<div style="margin:100px">
		身高：<span id="tip"></span>
		<p/>
		<div id="ss" style="height:400px;width:600px"></div>  
	</div>
	<script type="text/javascript">
		$("#ss").slider({
			mode : "v",
			min : 150,
			max : 190,
			rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
			showTip : true,
			value : 150
		});
	</script>
	
	<script type="text/javascript">
		$("#ss").slider({
			onChange : 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");
				}	
			}
		});
	</script>
  </body>

8、Progressbar進度條

<body>
	<div id="p" style="width:400px;"></div> 
	<script type="text/javascript">
		$("#p").progressbar({
			width : 1300,
			height : 100,
			value : 0
		});
	</script>	
	
	<input id="startID" type="button" value="動起來" style="width:111px;height:111px;font-size:33px"/>

	<script type="text/javascript">
		//獲取1到9之間的隨機數，包含1和9
		function getNum(){
			return Math.floor(Math.random()*9)+1;
		}
	</script>
	<script type="text/javascript">
		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");
		});
	</script>
  </body>

9、函式

<body>
	<script type="text/javascript">
		//正常方式
		function mysum(num1,num2){
			return num1 + num2;
		}
	</script>
	<script type="text/javascript">
		//構造器方式
		var yousum = new Function("num1","num2","return num1+num2;");
		alert( yousum(100,200) );
	</script>

	<script type="text/javascript">
		//定義物件
		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();
	</script>
  </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>

	<script type="text/javascript">
		//定位開啟視窗1按鈕，同時新增單擊事件
		$("#open1").click(function(){
			//開啟視窗1
			$("#window1").window({
				title : "視窗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"
			});
		});
	</script>
	
	<script type="text/javascript">
		//定位關閉視窗1按鈕，同時新增單擊事件
		$("#close1").click(function(){
			//關閉視窗1
			$("#window1").window("close");
		});
	</script>
  </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>
		
	<script type="text/javascript">
		//定位開啟視窗1按鈕，同時新增單擊事件
		$("#open1").click(function(){
			//開啟視窗1
			$("#window1").window({
				title : "視窗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"
			});
		});
	</script>
	
	<script type="text/javascript">
		//定位關閉視窗1按鈕，同時新增單擊事件
		$("#close1").click(function(){
			//關閉視窗1
			$("#window1").window("close");
		});
	</script>
  </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>

	<script type="text/javascript">
		$("#nameID").validatebox({
			required : true,
			validType : ['length[1,6]','zhongwen']
		});
	</script>
	<script type="text/javascript">
		$.extend($.fn.validatebox.defaults.rules, {    
		    zhongwen: {  
		        validator: function(value){   
		        	if(/^[\u3220-\uFA29]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        message: '姓名必須為中文'   
		    }    
		});  
	</script>
	<script type="text/javascript">
		$("#dateID").datebox({
			required : true
		});
	</script>
  </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>
	<script type="text/javascript">
		//定位所有的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,
					title : "顯示框",
					msg : "這是內容",
					timeout : 5000
				});
			}
		});	
	</script>
  </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>  

	<script type="text/javascript">
		$(function(){
			//收起所有的選項
			$("#treeID").tree("collapseAll");
		});
	</script>
  </body>

動態：

<body>
	<ul id="treeID"></ul>
	<script type="text/javascript">
		$("#treeID").tree({
			url : "/js-day06/json/pro.json"
		});
	</script>
  </body>

14、Datagrid資料表格
DateGrid會非同步以POST方式向伺服器傳入二個引數：page和rows二個引數，服務端需要哪個，就接收哪個引數
page：需要顯示的頁號
rows：需要獲取多少條記錄

Java進階學習第三十一天（EasyUI）

一、省-市-區三級聯動【struts2 +非資料庫版】

二、資料庫分頁【Servlet + JDBC + Oracle】

三、jQuery-EasyUI入門

四、jQuery-EasyUI元件

Java進階學習第三十一天（EasyUI）

Java進階學習第三十四天（WebService）

Java進階學習第三十二天（SpringMVC）

Java進階學習第三十天（Lucene）

Java進階學習第三十三天（MyBatis）

python學習第三十一天函數的嵌套及函數的作用域

走入計算機的第三十一天（多態和綁定方法）

Java進階學習之集合與泛型（1）

MySQL快速入門（一）—Java進階學習第十五天

Java進階學習第十五天（Struts框架）

Java進階學習第十四天（泛型、反射泛型、註解、Log4J日誌元件）

Java進階學習第十二天（監聽器、國際化）

python學習第三十一節

馬哥教育第三十一天至三十四天學習總結

Java進階學習第十三天（檔案上傳與下載、JavaMail郵件開發）

走入計算機的第三十八天（python的進程和協成））

python學習第七十一天：django2與1的差別和視圖

python學習第j十一天

2018.11.08python學習第三十六天

第三十一天- 程序序列(鎖) 佇列生成者消費者模型

Java進階學習第三十一天（EasyUI）

一、省-市-區三級聯動【struts2 +非資料庫版】

二、資料庫分頁【Servlet + JDBC + Oracle】

三、jQuery-EasyUI入門

四、jQuery-EasyUI元件

相關推薦