【Web学习笔记】easyui框架
生活随笔
收集整理的這篇文章主要介紹了
【Web学习笔记】easyui框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<僅供個人復習使用>
1.EasyUI 概述
- EasyUI一個基于JQuery的框架，集成了各種用戶界面插件
- EasyUI提供建立現代化JQuery的框架，集成了各種用戶界面插件
- HTML 網頁的完整框架
- …
2.EasyUI 的構建方式
2.1 版本文件的獲得（前期準備）
注意修改組件路徑：
2.2EasyUI組件使用
直接在HTML中聲明組件：
編寫JS代碼創建組件：
2.3 基于EasyUI的Web項目
上圖：
basePath 定位到 — WebContent 目錄
basePath/css/easyui.css
引入 可在下面用相對目錄
3.EasyUI中常用組件
3.1 文本框組件 TextBox
1）在Web 頁面中元素，具體代碼： <input class="easyui-textbox" id="sno" name="sno" /><br/> 2）設置或獲取值設置值：$("#sno").textbox("setText","20190001"); 或 $("#sno").textbox("setValue","20190001"); 或 $("#sno").val("20190001");獲得值：var value=$("#sno").textbox("getText"); 或 var value=$("#sno").textbox("getValue"); 或 var value=$("#sno").val(); 注意： easyui可能不支持(獲得值可以，設置值不行)var username=$("#sno").val() $("#sno").val("admin");(×)用easyui前兩種就好。3.2 下拉列表組件
1）在Web頁面中元素，具體代碼：<input class"easyui-combobox" id="school"name="school" style="width:200px" /> 2) 通過JS代碼創建組件，具體代碼： <script type="text/javascript"> $(function(){$("#school").combobox({//初始化combobox的數據來自于哪里 url:"${pageContext.request.contextPath}/SchoolServlet", //url:"combobox_data1.json", //在組件中顯示的數據的URLvalueField:"no",//編號textField:"name", //下拉可選的值panelHeight:"auto",//自動調整下拉面板的高度editable:false //不可編輯}) }) </script> package com.tjut.servlet;import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON; import com.tjut.dao.DBUtilT;@WebServlet("/SchoolServlet") public class SchoolServlet extends HttpServlet {private static final long serialVersionUID = 1L; public SchoolServlet() {super(); }protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//統一設置成支持中文request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String sql="select no,name from school";ArrayList<HashMap<String, String>> list = DBUtilT.executeQuery(sql); //多行多列的json數組String result = JSON.toJSONString(list);//轉換成JSON數組串PrintWriter out = response.getWriter();//獲得輸出流out.print(result);out.close();}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}常見操作
1）獲得組件的值：
var value=("#school").combobox("getValue");//獲得所選項目的valueField值，即上述對應id的值；看到的值，eg：1001 var text=$("#school").combobox("getText");//獲得所選項目的textfield值，即上述name對應的值；看到的值，eg：機械學院2）組件事件處理：當選項發生改變的事件，具體代碼如下：
easyuidemo.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <!-- 這里用EL表達式(以$開始) 或者用<basehref="< %=basePath%>" > 啊--> <!-- ${pageContext.request.contextPath} ----/FirstWebProject --> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/icon.css" /> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/easyui.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> <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script> <script type="text/javascript">$(function(){$("#sno").textbox("setValue","lisi");//設置：setText $("#school").combobox({url:"${pageContext.request.contextPath}/SchoolServlet?caozuo=initschool",//初始化combobox的數據來自于哪里 *///url:"combobox_data1.json",valueField:"no", //用戶看不到，1005---計算機學院textField:"name", // 下拉可選的值panelHeight:"auto", //下拉面板的高度editable:false,onChange:function(){var code=$("#school").combobox("getValue");$("#major").combobox({url:"${pageContext.request.contextPath}/SchoolServlet?caozuo=initmajor&code="+code,valueField:"code", textField:"name",panelHeight:"auto",editable:false});}});$("#get").click(function(){var school=$("#school").combobox("getValue");$("#sno").textbox("setValue",school);});}); </script> </head> <body>學生學號：<input class="easyui-textbox" id="sno" name="sno" /><br/>所屬學院：<input class="easyui-combobox" id="school" name="school" />所屬專業：<input class="easyui-combobox" id="major" name="major" /><input type="button" id="get" value="獲取" /> </body> </html> SchoolServlet.java package com.tjut.servlet;import java.io.IOException; import java.io.PrintWriter; import java.io.UnsupportedEncodingException; import java.util.ArrayList; import java.util.HashMap;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON; import com.tjut.dao.DBUtilT;@WebServlet("/SchoolServlet") public class SchoolServlet extends HttpServlet {private static final long serialVersionUID = 1L; public SchoolServlet() {super(); }protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String caozuo=request.getParameter("caozuo");switch (caozuo) {case "initschool":initschool(request, response);break;case "initmajor":initmajor(request, response);break;default:break;}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}private void initschool(HttpServletRequest request, HttpServletResponse response) throws IOException {//統一設置成支持中文request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String sql="select no,name from school";ArrayList<HashMap<String, String>> list = DBUtilT.executeQuery(sql); //多行多列的json數組String result = JSON.toJSONString(list);//轉換成JSON數組串PrintWriter out = response.getWriter();//獲得輸出流out.print(result);out.close();}private void initmajor(HttpServletRequest request, HttpServletResponse response) throws IOException {//統一設置成支持中文request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String code = request.getParameter("code");String sql="select * from major where school=?";Object args[] = {code};ArrayList<HashMap<String, String>> list = DBUtilT.executeQuery(sql, args); //多行多列的json數組String result = JSON.toJSONString(list);//轉換成JSON數組串PrintWriter out = response.getWriter();//獲得輸出流out.print(result);out.close();} }效果圖：
選中計算機學院時，后面下拉框顯示其所屬專業
3.3 日期組件 DateBox
Web頁面元素，具體代碼：$("#get").click(function(){var date=$("#birthday").datebox("getValue");$("#sno").textbox("setValue",date);});出生日期：<input class="easyui-datebox" id="birthday" name="birthday"/>效果圖：
3.4 日期事件組件DateTimeBox
與datebox基本相同
效果圖：
3.5 消息窗口(messager)
消息窗口提供了不同的消息框風格，包含alert(警告框),comfirm(確認框),prompt(提示框),progress(進度框)等。所有消息都是用回調函數去處理結果或做一些自己需要處理的事情。3.5.1顯示警告消息窗口-message.alert()
使用格式：$.messager.alert(title,msg,icon,fn); 參數說明：title: 在頭部面板顯示的標題文本msg: 顯示的消息文本icon:顯示的圖標圖像。可用值有：error，question，info，warningfn：在窗口關閉的時候觸發該回調函數3.5.2確認消息窗口-message.confrm()
1）使用格式：$.messager.confirm(title,msg,fn(r)); 2)參數說明：title:在頭部面板顯示的標題文本msg:顯示的消息文本fn:當用戶點擊“確定”按鈕的時候將傳遞一個true值給回調函數的參數r，否則傳遞一個flase值。應用實例：
<script type="text/javascript">$(function(){$("#show").click(function(){$.messager.confirm("提示","確認刪除學號是：20220001嗎？",function(r){alert(r);if(r){alert("確認按鈕");} else {alert("取消按鈕");}});});}); </script>3.5.3輸入文本的消息窗口-message.prompt()
1)使用格式：$.messager.prompt(title,msg,fn(r)); 2)參數說明：title：在頭部顯示的標題文本msg：顯示的消息文本fn：在用戶輸入一個值參數的時候執行的回調函數應用實例：
<script type="text/javascript">$(function(){$("#show").click(function(){$.messager.prompt("提示","請輸入購買的數量？",function(value){if(value)alert(value);elsealert("取消");});});}); </script>效果圖：
3.5.4在屏幕右下角顯示一條消息窗口-message.show()
1）使用格式：$.messager.show(配置參數);注：該選項參數是一個可配置的對象； 2）參數說明：showType：定義將如何顯示該消息。可用值有null，slide，fade，show。默認：slideshowSpeed：定義窗口顯示的過度時間。默認：600mstitle：在頭部面板顯示的標題文本msg：顯示的消息文本width：定義消息窗口的寬度。默認：250pxheight：定義消息窗口的高度。默認：100pxstyle：定義消息窗體的自定義樣式timeout：如果定義為0，消息窗體將不會自動關閉，除非用戶關閉它。如果定義成非0的值，消息窗體將在超時后自動關閉。默認：4s應用實例：
<script type="text/javascript">$(function(){$("#show").click(function(){$.messager.show({title:"提示",showType:"slide",msg:"通知文本",showSpeed:5000,timeout:3000,width:500,height:200})});}); </script>ps：width，height不加單位
3.6 表單組件Datagrid
十分重要的組件，可使數據按行和列的方式進行展示。效果圖：
常用：DataGrid with Toolbar
總結
以上是生活随笔為你收集整理的【Web学习笔记】easyui框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery EasyUI框架
- 下一篇： Easy UI框架