1.常用的前端架構
EasyUI架構,Jquery架構,Vue架構
2.EasyUI的介紹
介紹
EasyUI是一個前端開發的架構,其将常用的頁面開發使用的元件進行了封裝,前端開發人員隻需将EasyUI的資源導入項目後使用即可,快速提升開發效率。
使用
① 導入EasyUI的資源
② 查閱API文檔使用EasyUI的元件完成頁面開發
學習:
① EasyUI提供的元件及其使用方式(API)
② EasyUI的布局
3.EasyUI的常用元件
資源的介紹:
① 将從官網上下載下傳的EasyUI的資源壓縮包解壓

② demo檔案夾:EasyUI官方提供的每個元件的使用示例效果代碼。
③ locale檔案夾:元件中顯示的資料語言的js檔案
④ plugins檔案夾:是EasyUI提供的元件對應的js檔案
⑤ src檔案夾:源碼檔案夾
⑥ themes檔案夾:EasyUI官方提供的整套的樣式
⑦ jquery.min.js檔案:依賴的jquery檔案,建議使用官方提供的jquery檔案不要自 己随便更換版本,可能會造成版本不相容。
⑧ jquery.easyui.min.js:封裝了所有元件的js檔案
EasyUI的常用元件
① 基礎元件:常用的比較小的功能元件,不是每個網頁中都會用到
② 布局元件: 很重要,每個網頁都會使用,完成網頁的布局的。
③ 菜單與按鈕元件:很重要,每個網頁都會使用,在網頁中完成菜單和按鈕的效果
④ 表單元件:很重要,搜集使用者資料,封裝了常用的資料校驗,并支援自定義校驗
⑤ 視窗元件:在目前頁面中顯示子視窗效果,對頁面中的功能進行完善。
⑥ 資料網格和樹元件:很重要,非常之重要。在網頁中顯示表格以及樹狀資料
4.元件的使用
1. easyui-panel 面闆
作用
在網頁中顯示一個面闆效果,可以在面闆中顯示網頁中的資料
使用
① 在jsp頁面中引入EasyUI的資源
② 在頁面建立一個div标簽,并設定其class屬性,屬性值為‘easyui-panel’
③ 在div标簽上使用屬性data-options設定面闆的初始化效果,設定元件的屬性和
事件,以鍵值對的形式設定,不同的鍵值對使用逗号隔開。
④ 可以使用jquery來調用元件提供的方法,根據使用者在網頁中的行為動作對元件
作出對應的操作。
效果圖:
2. easyui的元件使用流程
① 在jsp中引入EasyUI的資源
② 在jsp頁面使用HTML方式或者js方式建立元件
③ 使用元件的屬性和事件來初始化設定元件的效果
④ 使用元件的方法實作元件和使用者互動的效果
- easyui-textbox元件
① 聲明一個普通的input文本标簽
② 通過js代碼的方式完成textbox元件初始化效果
元素标簽.元件名({屬性:值,屬性:值,…,事件名:函數…})
4. easyui-passwordbox元件
作用
在頁面中顯示一個密碼框
使用
HTML标簽方式或者js方式,參照API文檔
效果示例
5. easyui-combobox下拉框元件
作用
在頁面中顯示一個下拉框效果,提供了豐富的屬性和事件可以讓我們根據需求來設 置自己想要的元件效果。
使用
使用HTML标簽方式或者js方式完成建立和初始化設定,參照API
效果:
6. easyui-datebox 日期框
作用
在頁面中顯示一個可以選擇日期的文本框
使用
使用HTML标簽建立和初始化或者使用js方式建立和初始化
效果圖:
具體資訊看API