javaWeb核心技術第十四篇之easyui

網站是分為網站的前臺和網站的後臺.
        前臺--給用戶看的   例如:商城
        後臺--給管理員看的  例如:商城後臺  目的:用來添加維護數據
    
    BootStrap:jsp 頁面顯示,效果好,美觀,適合作為用戶界面.
    EasyUI : jsp頁面,快速開發,格式統一,美觀效果一般.
    
    EasyUI裡面有很多組件(功能模塊):有自己的特使,但編寫簡單,只需固定html代碼結構.
    
    EasyUI環境搭建:
        1.導入css , 需要2個css
        2.導入jquery,需要2個js
            <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/easyui.css">
            <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/icon.css">
            <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/demo.css">
            <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>
                
    EasyUI的定義方式:
        easyui規定:我們只需要提供簡單html代碼結構,就可以生成特殊的效果.
            easyui的定義方式:
                1.html代碼結構.
                    1.1:需要有class="easyui-*"  *表示組件的名稱.
                    1.2:easyui提供另外一個屬性:data-options:裡面可以寫easyui提供的屬性.
                        data-options格式:json格式:key:value,key:value......
                
                2.js渲染.
                    2.1:語法 : 對象.組件名稱();
                    2.2:語法 : 對象.組件名稱({key:value,key:value.....});
                
                例如:
                    html例子:
                    <div class="easyui-window" data-options="title:'this is 標題',width:200,height:400"></div>
                    
                    js例子:
                    <div id="myDiv"></div>
                    <script>
                        //如果使用js渲染,語法 : 對象.組件名稱({key:value,key:value.....});
                        $("#myDiv").window({
                            title:'這是新的標題',
                            width:400,
                            height:400
                        });
                    </script>    
    Easy--屬性--事件--方法:
        easyui的屬性 : 事件,方法
            屬性 : 組件自身特點,事件和屬性可以寫在一起,格式:key:value,key:value....
            事件 : (被動)完成某件事情後觸發的動作.
                $(對象).組件名稱({
                    屬性:屬性值,
                    屬性:屬性值,
                    事件:函數
                })
            
            方法:(主動)主動完成某件事件.
            語法:
                $(對象).組件名稱(方法名稱,方法的參數)
                
            <div class="easyui-dialog" data-options="width:200,height:200",onBeforeClose:function(){
                    alert('視窗即將關閉');
            }"></div>
            
            例如:
                <div id="myDiv2"></div>
                <input type="button" value="關閉視窗" onclick="closeDialog()">
                <input type="button" value="打開視窗" onclick="openDialog()">
                //事件
                <script type="text/javascript">
                    $("#myDiv2").dialog({
                        width:200,
                        height:200,
                        onBeforeClose:function(){
                            alert('視窗即將關閉')
                        }
                    });
                
                function closeDialog() {
                    //方法設置的標準語法 : $(對象).組件名稱(方法名稱[,方法的值])
                    $("#myDiv2").dialog("close");
                
                }
                function openDiaLog() {
                    $("#myDiv2").dialog("open");
                }
        </script>
    
    表單:
        預設情況下,表單是傳統表單,傳統表單同步,easyui的表單是非同步的.
        <script>
            $("#ff").from({
                url:"${pageContext.request.contextPath}/DemoServlet",//等效action屬性,表單提交的路徑.
                onSubmit : function() {
                    //在此處可以做效驗,表單提交前效驗.
                    //alert(1);
                    //return false;
                },
                success:function(data) {
                    //回調函數,此處是沒有判斷狀態碼為200情況,以後是需要判斷data值.
                    alert(data)
                }
            });
        </script>
    Tabs:選項卡
        <script>
            function addTabs(){
                var flag = $("#tt").tabs("exists","工資條");
                
                if(flag){
                    //如果面板已經存在,選中該面板
                    $("#tt").tabs("select","工資條");
                }else{
                    //如果面板不存在,添加面板
                    $("#tt").tabs("add",{
                        title : "工資條",  //標題
                        content : "Tab Body",  //內容
                        closable : true  //是否可以關閉
                        
                    });
                }
                
            }
        </script>
            
    下拉框:
        <input id="cc" name="dept" value="請選擇">
            <script>
                $("#cc").combobox({
                    //可以載入遠程事件,支持json   easyui都支持json
                    url:"combobox_data.json",
                    valueField : "id", //對應value值,需要將json的key放在此處,  // <option value="">文本</option>
                    textFiedld : "name"  //將要顯示的文本的key放在此處
                    
                });
            </script>
    
    Datagrid:數據表單
        url : 載入遠程的數據,支持json
            表格中的field的欄位名稱,必須和json的一致,如果一致,表單將自動填充json數據.
        <table class="easyui-datagrid" data-options="url:'datagrid_data.json',fit:true">
            <thead>
                <tr>
                    <th data-options="field:'id',width:100">編碼</th>
                    <th data-options="field:'name',width:100">名稱</th>
                    <th data-options="field:'age',width:100,align:'right'">價格</th>
                    <th data-options="field:'pimage',width:100,align:'right',formatter:function( value , rows , index){ return '<img src='+value + '>';}">圖片</th>
                </tr>
            </thead>
        </table>
    
    <table id="dg"></table>
        value : 表示當前json的值
        rows : 表示當前行的對象
        index : 表示當前行的索引
    <script>
        $('#dg').datagrid({    
            url:'datagrid_data.json', //url : 載入遠程的數據 支持json     
            columns:[[    
                {field:'id',title:'id',width:100},    
                {field:'name',title:'Name',width:100},    
                {field:'age',title:'age',width:100,align:'right'}, 
                {field:'pimage',title:'pimage',width:100,align:'right',
                    formatter:function(value , rows , index){
                        return  "<img src='"+value+"' style='width:40px'>";
                       }    
                }    
            ]],
            fit:true ,//表格自動填充
            fitColumns:true, //列自動填充
            autoRowHeight:true,//高度填充
            toolbar:[{
                iconCls: 'icon-edit',
                handler: function(){alert('編輯按鈕')}
            },'-',{
                iconCls: 'icon-help',
                handler: function(){alert('幫助按鈕')}
            }],
            singleSelect:true, //只能選擇一個
            pagination:true,//頁面的底部加上分頁條
            pageNumber:1, //預設打開第一頁
            pageSize:5,
            pageList:[5,10,15,20,25,30]
        });  
    </script>
    
    後臺代碼:
        接收的分頁參數:
        響應回去的數據:
        
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //問題1: 頁面需要傳入 pageSize 和 pageNumber
            //問題2: 響應數據 是什麼? 頁面需要什麼數據來進行分頁
            
            //0.編碼
            request.setCharacterEncoding("utf-8");
            response.setHeader("content-type", "text/html;charset=utf-8");
            //1.獲得數據
            String pageNumberStr = request.getParameter("page");
            String pageSizeStr = request.getParameter("rows");
            
            int pageNumber = Integer.valueOf(pageNumberStr);
            int pageSize = Integer.valueOf(pageSizeStr);
            
            //int pageNumber= 1;
            //int pageSize = 5;
            
            //2.處理數據
            ProductService service = new ProductService();
            //List<Product> pList = service.findAll();
            //如果響應回去的只是list 不會進行分頁
            //List<Product> pList = service.findByPage( pageNumber , pageSize);
            EasyUIPageBean<Product> easyUIPageBean = service.findByEasyUIPage( pageNumber , pageSize);
            
            //需要響應的數據{total:28 , "rows" : [ {} , {} ,{} ]}   ==>> 可以使用map 也可以封裝對象
            //但目前是           [{key:value,key:value},{key:value,key:value}..]
            
            
            //3.響應
            Gson gson = new Gson();
            String json = gson.toJson(easyUIPageBean);
            System.out.println(json);
            response.getWriter().print(json); 
        } catch (Exception e) {
            e.printStackTrace();
        }
    
    }