javaWeb核心技術第十四篇之easyui
- 2019 年 10 月 5 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/zhao1299002788/article/details/100185402
網站是分為網站的前台和網站的後台. 前台--給用戶看的 例如:商城 後台--給管理員看的 例如:商城後台 目的:用來添加維護數據 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(); } }