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