本書詳細(xì)介紹了EasyUI的各類組件以及在使用過(guò)程中容易遇到的一些問(wèn)題，由于EasyUI版本更新較為頻繁，本書在講解時(shí)會(huì)注重向讀者介紹EasyUI的設(shè)計(jì)思路，幫助讀者從插件設(shè)計(jì)的高度來(lái)掌握EasyUI插件。本書附帶資源和源碼兩個(gè)文件，其中資源文件中給出了EasyUI開發(fā)中的常用工具和資源，例如搭建本地服務(wù)器工具、圖標(biāo)資源等，在源碼文件中給出了實(shí)用的EasyUI開發(fā)源碼。
本書共3篇，12章，涵蓋的主要內(nèi)容有表單設(shè)計(jì)、元素的拖放和縮放、提示框、滾動(dòng)條、滑塊、面板、布局、窗口、自定義插件設(shè)計(jì)、數(shù)據(jù)網(wǎng)格、樹、CRUD應(yīng)用、移動(dòng)端設(shè)計(jì)、主題更改、生成報(bào)表、擴(kuò)展插件等。
本書內(nèi)容豐富，學(xué)習(xí)門檻低，既可以作為EasyUI的參考文檔，也可以作為EasyUI的入門書籍，特別適合EasyUI的初學(xué)者以及對(duì)EasyUI有部分困惑的開發(fā)人員閱讀。
目前互聯(lián)網(wǎng)開發(fā)一款產(chǎn)品一般都是要求快速開發(fā)，然后快速迭代，這就要求開發(fā)人員有統(tǒng)一的界面和支持快速開發(fā)的框架。對(duì)于前端來(lái)說(shuō)，不管是PC前端還是移動(dòng)前端，都要遵守UI的一致性原則。EasyUI正好節(jié)省了網(wǎng)頁(yè)開發(fā)的時(shí)間和規(guī)模，還能在各平臺(tái)保持界面完美統(tǒng)一，符合當(dāng)下流行的用戶交互方式�；旧纤谢ヂ�(lián)網(wǎng)前端都需要用到UI技術(shù)，也都需要使用一些UI框架。在這些框架中，EasyUI是入門*，也是后端做全棧技術(shù)、快速開發(fā)項(xiàng)目的*。
本書專為Web開發(fā)人員與后端開發(fā)人員量身定制，從零開始、圖文結(jié)合，使你能夠快速上手前端開發(fā)技術(shù)。
前 言
Web應(yīng)用的本質(zhì)就是信息的保存和瀏覽。信息的擁有者將信息保存到電腦的指定區(qū)域并對(duì)外開放，其他用戶可以通過(guò)網(wǎng)絡(luò)瀏覽這些信息。對(duì)于信息的擁有者來(lái)說(shuō)，必須有一個(gè)可以供其保存信息的頁(yè)面，這個(gè)頁(yè)面可以稱為管理員頁(yè)面。對(duì)于信息的瀏覽者來(lái)說(shuō)，必須有一個(gè)可以供其查看信息的頁(yè)面，這個(gè)頁(yè)面稱為前端用戶頁(yè)面。
隨著近年來(lái)互聯(lián)網(wǎng)突飛猛進(jìn)的發(fā)展，Web應(yīng)用正在發(fā)生翻天覆地的變化，前端用戶界面變得越來(lái)越豐富，信息的展示方式也由傳統(tǒng)的文字變成圖片、視頻、動(dòng)畫甚至地圖等元素。隨著前端頁(yè)面的不斷豐富，傳統(tǒng)的HTML JavaScript CSS開發(fā)變得更加吃力，于是各類開發(fā)框架如雨后春筍般不斷涌出。開發(fā)框架的主要目的是減輕開發(fā)者的工作。目前市場(chǎng)上的前端框架可以分為兩類，第一類框架只做該做的事情，第二類框架做該做的以及不該做的事情。我們以遙控器為例，第一類框架僅僅只是設(shè)計(jì)了遙控器的外形，至于按下遙控器上的按鈕電視機(jī)該調(diào)什么臺(tái)，這些事情仍然需要開發(fā)者編寫代碼控制。第二類框架將遙控器的外形以及功能全部設(shè)計(jì)好，開發(fā)者只需要瀏覽說(shuō)明書即可使用。EasyUI就是第二類框架，因此它使用起來(lái)相當(dāng)簡(jiǎn)單。我們知道一個(gè)簡(jiǎn)單的遙控器由數(shù)字按鍵、音量按鍵以及頻道按鍵組成，通過(guò)使用這些按鍵用戶即可操控一臺(tái)電視機(jī)。EasyUI組件由三部分組成，分別是屬性、事件和方法。通過(guò)這三部分，開發(fā)者即可完全控制EasyUI的組件。
EasyUI的優(yōu)點(diǎn)也是其學(xué)習(xí)的難點(diǎn)，因?yàn)樗庋b了太多的內(nèi)容，初學(xué)者在學(xué)習(xí)時(shí)常常會(huì)摸不著頭腦。例如，當(dāng)在EasyUI中使用文本框時(shí)，EasyUI會(huì)在構(gòu)建文本框時(shí)額外創(chuàng)建兩個(gè)輸入框，分別是展示值框、存儲(chǔ)值框，它會(huì)將開發(fā)者定義的文本框及其構(gòu)建的存儲(chǔ)值框隱藏起來(lái)，僅向用戶顯示其構(gòu)建的展示值框，此時(shí)開發(fā)者更改自己定義的文本框風(fēng)格時(shí)就會(huì)發(fā)現(xiàn)不起作用了。又比如EasyUI為了讓開發(fā)者更靈活地初始化組件，提供了五種初始化的渠道，這些渠道可以同時(shí)初始化同一屬性，但是由于它們的優(yōu)先級(jí)不一樣，因此最終顯示結(jié)果也不一樣。
目前圖書市場(chǎng)上關(guān)于EasyUI開發(fā)及框架整合的圖書不少，但是這些書籍通常會(huì)出現(xiàn)兩個(gè)極端：一部分書籍中重點(diǎn)講解的是實(shí)戰(zhàn)項(xiàng)目，EasyUI僅僅被當(dāng)作項(xiàng)目的一個(gè)工具來(lái)講解，所占的講解比例相當(dāng)少；另一部分僅僅是向讀者介紹EasyUI組件的屬性、事件以及方法，而其如何使用卻很少提及。作者力圖擺脫這兩個(gè)極端，在本書中以一個(gè)EasyUI初學(xué)者的角色與讀者共同探討學(xué)習(xí)，并且找出初學(xué)者容易困惑以及混淆的知識(shí)點(diǎn)重點(diǎn)講解。
本書特色
1. 零基礎(chǔ)入門，學(xué)習(xí)門檻低
本書不需要讀者有太多的Web前端以及后端開發(fā)基礎(chǔ)，對(duì)于需要用到的前端開發(fā)技術(shù)，本書都會(huì)做簡(jiǎn)要講解；對(duì)于后端開發(fā)，讀者僅需掌握后端獲取數(shù)據(jù)和輸出數(shù)據(jù)的參數(shù)和數(shù)據(jù)格式即可，因此本書是一本零基礎(chǔ)入門的書籍。
2. 簡(jiǎn)約但不簡(jiǎn)單
為了方便讀者更容易地掌握EasyUI的知識(shí)點(diǎn)，本書不做太多實(shí)戰(zhàn)項(xiàng)目的分析和開發(fā)，力爭(zhēng)每個(gè)例子僅介紹一個(gè)知識(shí)點(diǎn)，在源碼文件中的每個(gè)例子僅介紹單個(gè)組件的使用方法。
3. 直擊學(xué)習(xí)痛點(diǎn)
作者在論壇等技術(shù)社區(qū)收集了大量EasyUI初學(xué)者在學(xué)習(xí)中遇到的困惑，并在本書中給出解答，因此本書是一本接地氣的書籍，直擊初學(xué)者的學(xué)習(xí)痛點(diǎn)。
4. EasyUI插件源碼分析和山寨
本書在第6章帶領(lǐng)讀者分析EasyUI插件的源碼，并且向讀者介紹了jQuery中插件的設(shè)計(jì)方法，最后帶領(lǐng)讀者山寨EasyUI插件的設(shè)計(jì)方法設(shè)計(jì)一個(gè)自定義插件。EasyUI插件的設(shè)計(jì)有著非常優(yōu)秀的規(guī)范，因此讀者掌握了它的設(shè)計(jì)規(guī)范后，無(wú)論是否在項(xiàng)目開發(fā)中使用EasyUI框架都將受益匪淺。
本書內(nèi)容
第1篇 EasyUI的基礎(chǔ)組件（第1～6章）
本篇介紹EasyUI開發(fā)中的基礎(chǔ)組件，這些組件通常用于設(shè)計(jì)網(wǎng)站的布局以及向服務(wù)器提交用戶輸入的數(shù)據(jù)。第6章帶領(lǐng)讀者深入解析EasyUI插件的源碼，在分析源碼的過(guò)程中解釋大量初學(xué)者容易混淆的概念以及使用方法，最后帶領(lǐng)讀者模擬EasyUI插件的設(shè)計(jì)規(guī)范設(shè)計(jì)自定義的插件。
第2篇 EasyUI數(shù)據(jù)的獲取和展示（第7～8章）
本篇主要介紹EasyUI中數(shù)據(jù)的獲取和展示。相對(duì)于其他前端框架，EasyUI的優(yōu)勢(shì)莫過(guò)于其強(qiáng)大的數(shù)據(jù)獲取和展示功能。在第8章中向讀者介紹三種使用EasyUI創(chuàng)建CRUD應(yīng)用的方法。
第3篇 EasyUI高級(jí)應(yīng)用（第9～12章）
本篇主要介紹EasyUI的高級(jí)應(yīng)用，包括移動(dòng)端樣式的設(shè)計(jì)、主題的更改以及EasyUI常見的擴(kuò)展插件。在最后一章中向讀者展示使用EasyUI開發(fā)一個(gè)實(shí)戰(zhàn)項(xiàng)目。
代碼下載與反饋
本書配套代碼下載地址請(qǐng)掃描右邊二維碼獲取。如果下載有問(wèn)題，請(qǐng)聯(lián)系booksaga@163.com，郵件主題為jQuery EasyUI從零開始學(xué)。
如果閱讀過(guò)程中發(fā)現(xiàn)有什么問(wèn)題，請(qǐng)發(fā)送郵件至49659450@qq.com。
本書讀者
? 需要快速介入Web前端開發(fā)的程序員
? 需要快速掌握Web前端技術(shù)的后端開發(fā)人員
? 需要全面學(xué)習(xí)EasyUI開發(fā)技術(shù)的人員
? 網(wǎng)頁(yè)設(shè)計(jì)人員
? 希望提高項(xiàng)目開發(fā)水平的人員
? 專業(yè)培訓(xùn)機(jī)構(gòu)的網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)頁(yè)開發(fā)學(xué)員
? 軟件開發(fā)項(xiàng)目經(jīng)理
本書由施堯著，其他參與創(chuàng)作的還有陳曉珺、陳云香、王曉華、劉澤楷、薛燚、孫亞南、薛福輝、管書香、王云云、支傳華、王啟明、李一鳴。
施 堯
2018年8月
施堯，某環(huán)保軟件公司項(xiàng)目主管。目前負(fù)責(zé)互聯(lián)網(wǎng)在政務(wù)、環(huán)保等領(lǐng)域的應(yīng)用，擅長(zhǎng)于jQuery、Vue、React等前端框架，有著豐富的實(shí)戰(zhàn)開發(fā)經(jīng)驗(yàn)。
目 錄
第1篇 EasyUI的基礎(chǔ)組件
第1章 jQuery EasyUI快速入門 3
1.1 什么是jQuery EasyUI 3
1.2 jQuery EasyUI的初步使用 4
1.2.1 下載及版本說(shuō)明 4
1.2.2 直接在HTML中使用 4
1.2.3 使用Javascript創(chuàng)建 4
1.3 搭建本地服務(wù)器 5
1.4 實(shí)戰(zhàn)：第一個(gè)EasyUI注冊(cè)頁(yè)面 8
1.5 小結(jié) 9
第2章 EasyUI表單 10
2.1 文本框簡(jiǎn)介 10
2.1.1 驗(yàn)證框（ValidateBox） 11
2.1.2 文本框（TextBox） 17
2.1.3 密碼框（PasswordBox） 26
2.1.4 數(shù)字框（NumberBox） 27
2.2 組合簡(jiǎn)介 33
2.2.1 組合（Combo） 33
2.2.2 組合框（ComboBox） 37
2.3 微調(diào)器簡(jiǎn)介 46
2.3.1 微調(diào)器（Spinner） 46
2.3.2 數(shù)字微調(diào)器（NumberSpinner） 48
2.3.3 時(shí)間微調(diào)器（TimeSpinner） 49
2.3.4 日期微調(diào)器（DateTimeSpinner） 50
2.4 菜單和按鈕 51
2.4.1 菜單（Menu） 51
2.4.2 鏈接按鈕（LinkButton） 56
2.4.3 菜單按鈕（MenuButton） 59
2.4.4 分割按鈕（SplitButton） 61
2.4.5 切換按鈕（SwitchButton） 63
2.5 快速輸入日期 64
2.5.1 日歷（Calendar） 65
2.5.2 日期框（DateBox） 68
2.5.3 日期時(shí)間框（DateTimeBox） 76
2.6 其他高級(jí)組件 77
2.6.1 標(biāo)簽框（TagBox） 77
2.6.2 搜索框（SearchBox） 78
2.6.3 文件框（FileBox） 80
2.7 表單 83
2.7.1 表單的基本使用方法 83
2.7.2 提交表單 85
2.7.3 初始化表單字段 86
2.7.4 文件上傳 88
2.8 小結(jié) 89
第3章 拖 放 90
3.1 DOM與事件對(duì)象 90
3.1.1 DOM 90
3.1.2 事件對(duì)象 92
3.2 拖放（Draggable） 93
3.2.1 拖放的使用方法 93
3.2.2 容器內(nèi)拖放 97
3.2.3 快速拖放 98
3.3 放置（Droppable） 99
3.3.1 放置的使用方法 99
3.3.2 授權(quán)拖放的組件 100
3.4 縮放（Resizable） 102
3.5 實(shí)戰(zhàn)：購(gòu)物車的拖放 103
3.6 小結(jié) 105
第4章 常用組件 106
4.1 提示框（Tooltip） 106
4.1.1 創(chuàng)建提示框 106
4.1.2 提示框可綁定的元素 108
4.1.3 提示框的內(nèi)容 110
4.2 進(jìn)度條（ProgressBar） 111
4.3 滑塊（Slider） 112
4.4 實(shí)戰(zhàn)：向服務(wù)器提交滑塊數(shù)據(jù) 115
4.5 小結(jié) 116
第5章 窗口與布局 117
5.1 面板 117
5.1.1 基礎(chǔ)面板（Panel） 117
5.1.2 折疊面板（Accordion） 128
5.1.3 選項(xiàng)卡（Tabs） 134
5.2 布局（Layout） 139
5.2.1 簡(jiǎn)單的布局 140
5.2.2 添加和刪除布局 143
5.2.3 布局的種類 144
5.2.4 嵌套布局 146
5.2.5 自適應(yīng)高度布局 147
5.2.6 復(fù)雜布局 148
5.3 窗口（Window） 151
5.3.1 創(chuàng)建簡(jiǎn)單的窗口 151
5.3.2 創(chuàng)建模態(tài)窗口 153
5.3.3 創(chuàng)建內(nèi)聯(lián)窗口 153
5.3.4 窗口的布局 154
5.3.5 窗口的頁(yè)腳 155
5.3.6 窗口的邊框樣式 156
5.4 對(duì)話框（Dialog） 157
5.5 信息提示窗口（Messager） 159
5.5.1 底部提示窗口 159
5.5.2 消息提示窗口 160
5.5.3 確認(rèn)提示窗口 161
5.5.4 進(jìn)度提示窗口 162
5.5.5 輸入提示窗口 162
5.6 小結(jié) 163
第6章 深入理解EasyUI組件機(jī)制 164
6.1 使用EasyUI開發(fā)自定義組件 165
6.2 插件的制作方法 171
6.2.1 使用jQuery制作插件 172
6.2.2 $.extend方法 173
6.2.3 $.data方法 174
6.3 EasyUI插件源碼分析 174
6.3.1 默認(rèn)配置和選項(xiàng)對(duì)象 174
6.3.2 EasyUI屬性設(shè)置 176
6.3.3 默認(rèn)方法 179
6.3.4 其他源碼分析 180
6.3.5 總結(jié) 181
6.4 制作起止日期框插件 182
6.5 在標(biāo)記中定義組件 186
6.6 起止日期框使用文檔 187
6.7 小結(jié) 190
第2篇 EasyUI數(shù)據(jù)的獲取和展示
第7章 數(shù)據(jù)的獲取與展示 193
7.1 使用表單向服務(wù)器提交數(shù)據(jù) 193
7.2 數(shù)據(jù)網(wǎng)格（DataGrid） 194
7.2.1 使用本地?cái)?shù)據(jù)初始化數(shù)據(jù)網(wǎng)格 195
7.2.2 使用服務(wù)器端數(shù)據(jù)初始化數(shù)據(jù)網(wǎng)格 196
7.2.3 數(shù)據(jù)網(wǎng)格中的列 198
7.2.4 數(shù)據(jù)網(wǎng)格中的行 210
7.2.5 創(chuàng)建工具欄 214
7.2.6 數(shù)據(jù)網(wǎng)格事件和方法 215
7.2.7 數(shù)據(jù)網(wǎng)格編輯 221
7.2.8 數(shù)據(jù)網(wǎng)格視圖 228
7.3 分頁(yè)器（Pagination） 229
7.3.1 分頁(yè)器概述 229
7.3.2 數(shù)據(jù)網(wǎng)格中的分頁(yè) 233
7.4 數(shù)據(jù)列表（DataList） 236
7.5 屬性網(wǎng)格（PropertyGrid） 239
7.6 組合網(wǎng)格（ComboGrid） 241
7.7 樹（Tree） 244
7.7.1 樹形結(jié)構(gòu)簡(jiǎn)介 244
7.7.2 EasyUI中樹的使用方法 245
7.7.3 可編輯的樹 256
7.7.4 動(dòng)態(tài)操作樹 256
7.8 樹形網(wǎng)格（TreeGrid） 257
7.8.1 樹形網(wǎng)格的基本使用方法 258
7.8.2 復(fù)雜的樹形網(wǎng)格 263
7.9 組合樹（ComboTree） 265
7.10 組合樹形網(wǎng)格 266
7.11 小結(jié) 268
第8章 CRUD 應(yīng)用 269
8.1 了解什么是CRUD 269
8.2 創(chuàng)建簡(jiǎn)單的CRUD應(yīng)用 270
8.2.1 查詢數(shù)據(jù)（Retrieve） 270
8.2.2 增加數(shù)據(jù)（Create） 271
8.2.3 更新數(shù)據(jù)（Update） 272
8.2.4 刪除數(shù)據(jù)（Delete） 273
8.2.5 提交表單 274
8.2.6 服務(wù)器代碼簡(jiǎn)介 275
8.3 創(chuàng)建CRUD數(shù)據(jù)網(wǎng)格 276
8.3.1 獲取數(shù)據(jù) 276
8.3.2 新增數(shù)據(jù) 277
8.3.3 更新數(shù)據(jù) 278
8.3.4 刪除數(shù)據(jù) 278
8.4 自動(dòng)增加網(wǎng)格行數(shù)據(jù) 279
8.4.1 讀取數(shù)據(jù) 279
8.4.2 編輯數(shù)據(jù) 280
8.4.3 創(chuàng)建數(shù)據(jù) 282
8.4.4 刪除數(shù)據(jù) 283
8.5 小結(jié) 284
第3篇 EasyUI高級(jí)應(yīng)用
第9章 開發(fā)移動(dòng)頁(yè)面 287
9.1 移動(dòng)端基礎(chǔ) 287
9.1.1 自適應(yīng)屏幕寬度 287
9.1.2 移動(dòng)端調(diào)試方法 288
9.1.3 EasyUI開發(fā)移動(dòng)頁(yè)面基礎(chǔ) 289
9.2 表單 290
9.2.1 輸入框 290
9.2.2 按鈕 291
9.2.3 開發(fā)移動(dòng)端登錄頁(yè)面 292
9.3 移動(dòng)端頁(yè)面布局 293
9.3.1 工具欄 293
9.3.2 面板 294
9.3.3 選項(xiàng)卡 295
9.3.4 折疊面板 297
9.3.5 布局 297
9.3.6 菜單 298
9.3.7 樹 299
9.4 對(duì)話框 300
9.5 信息提示 300
9.6 動(dòng)畫 301
9.7 數(shù)據(jù)展示 301
9.7.1 簡(jiǎn)單的列表（SimpleList） 301
9.7.2 數(shù)據(jù)列表（DataList） 302
9.7.3 數(shù)據(jù)網(wǎng)格（Datagrid） 303
9.8 小結(jié) 304
第10章 jQuery EasyUI的主題 305
10.1 更改主題樣式 305
10.2 替換本機(jī)主題樣式 306
10.3 保存主題樣式 307
10.3.1 在服務(wù)器上保存 307
10.3.2 本地保存 307
10.4 圖標(biāo)的更改 308
10.5 小結(jié) 308
第11章 jQuery EasyUI的擴(kuò)展 309
11.1 數(shù)據(jù)網(wǎng)格視圖 309
11.1.1 數(shù)據(jù)網(wǎng)格詳細(xì)內(nèi)容視圖（DataGrid DetailView） 309
11.1.2 數(shù)據(jù)網(wǎng)格分組視圖（DataGrid GroupView） 312
11.1.3 數(shù)據(jù)網(wǎng)格緩存視圖（DataGrid BufferView） 314
11.1.4 虛擬滾動(dòng)視圖（VirtualScrollView） 315
11.1.5 自定義數(shù)據(jù)網(wǎng)格視圖 318
11.2 可編輯的數(shù)據(jù)網(wǎng)格（Editable DataGrid） 320
11.3 可編輯樹（Editable Tree） 322
11.4 數(shù)據(jù)網(wǎng)格單元格編輯（Cell Editing in DataGrid） 325
11.5 數(shù)據(jù)網(wǎng)格拖曳與放置（Drag and Drop Rows in DataGrid） 327
11.6 樹形網(wǎng)格行的拖曳與放置（Drag and Drop Rows in TreeGrid） 328
11.7 列的擴(kuò)展（Columns Extension） 329
11.8 數(shù)據(jù)網(wǎng)格的過(guò)濾（DataGrid Filter Row） 331
11.9 數(shù)據(jù)分析器（PivotGrid） 339
11.10 DWR加速 342
11.11 RTL的支持 343
11.12 RibbonOffice功能區(qū)界面 344
11.13 文本編輯器（TextEditor） 345
11.14 小結(jié) 347
第12章 設(shè)計(jì)一個(gè)實(shí)戰(zhàn)項(xiàng)目 348
12.1 登錄驗(yàn)證設(shè)計(jì) 348
12.1.1 如何確認(rèn)身份 349
12.1.2 如何驗(yàn)證身份 350
12.1.3 登錄頁(yè)面的設(shè)計(jì) 351
12.1.4 登錄驗(yàn)證系統(tǒng)設(shè)計(jì)方案 354
12.2 加密與解密技術(shù) 355
12.2.1 對(duì)稱加密 355
12.2.2 非對(duì)稱加密 356
12.2.3 不可逆加密 356
12.3 EasyUI界面框架 356
12.4 小結(jié) 358
新書資訊