jQuery EasyUI從零開始學

第1篇  EasyUI的基礎組件

第1章  jQuery EasyUI快速入門 3

1.1  什么是jQuery EasyUI 3

1.2  jQuery EasyUI的初步使用 4

1.2.1  下載及版本說明 4

1.2.2  直接在HTML中使用 4

1.2.3  使用Javascript創(chuàng)建 4

1.3  搭建本地服務器 5

1.4  實戰(zhàn)：第一個EasyUI注冊頁面 8

1.5  小結(jié) 9

第2章  EasyUI表單 10

2.1  文本框簡介 10

2.1.1  驗證框（ValidateBox） 11

2.1.2  文本框（TextBox） 17

2.1.3  密碼框（PasswordBox） 26

2.1.4  數(shù)字框（NumberBox） 27

2.2  組合簡介 33

2.2.1  組合（Combo） 33

2.2.2  組合框（ComboBox） 37

2.3  微調(diào)器簡介 46

2.3.1  微調(diào)器（Spinner） 46

2.3.2  數(shù)字微調(diào)器（NumberSpinner） 48

2.3.3  時間微調(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  日期時間框（DateTimeBox） 76

2.6  其他高級組件 77

2.6.1  標簽框（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與事件對象 90

3.1.1   DOM 90

3.1.2   事件對象 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  實戰(zhàn)：購物車的拖放 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  進度條（ProgressBar） 111

4.3  滑塊（Slider） 112

4.4  實戰(zhàn)：向服務器提交滑塊數(shù)據(jù) 115

4.5  小結(jié) 116

第5章  窗口與布局 117

5.1   面板 117

5.1.1  基礎面板（Panel） 117

5.1.2  折疊面板（Accordion） 128

5.1.3  選項卡（Tabs） 134

5.2  布局（Layout） 139

5.2.1  簡單的布局 140

5.2.2  添加和刪除布局 143

5.2.3  布局的種類 144

5.2.4  嵌套布局 146

5.2.5  自適應高度布局 147

5.2.6  復雜布局 148

5.3  窗口（Window） 151

5.3.1  創(chuàng)建簡單的窗口 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  窗口的頁腳 155

5.3.6  窗口的邊框樣式 156

5.4  對話框（Dialog） 157

5.5  信息提示窗口（Messager） 159

5.5.1  底部提示窗口 159

5.5.2  消息提示窗口 160

5.5.3  確認提示窗口 161

5.5.4  進度提示窗口 162

5.5.5  輸入提示窗口 162

5.6  小結(jié) 163

第6章  深入理解EasyUI組件機制 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  默認配置和選項對象 174

6.3.2  EasyUI屬性設置 176

6.3.3  默認方法 179

6.3.4  其他源碼分析 180

6.3.5  總結(jié) 181

6.4  制作起止日期框插件 182

6.5  在標記中定義組件 186

6.6  起止日期框使用文檔 187

6.7  小結(jié) 190

第2篇  EasyUI數(shù)據(jù)的獲取和展示

第7章  數(shù)據(jù)的獲取與展示 193

7.1  使用表單向服務器提交數(shù)據(jù) 193

7.2  數(shù)據(jù)網(wǎng)格（DataGrid） 194

7.2.1  使用本地數(shù)據(jù)初始化數(shù)據(jù)網(wǎng)格 195

7.2.2  使用服務器端數(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  分頁器（Pagination） 229

7.3.1  分頁器概述 229

7.3.2  數(shù)據(jù)網(wǎng)格中的分頁 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)簡介 244

7.7.2  EasyUI中樹的使用方法 245

7.7.3  可編輯的樹 256

7.7.4  動態(tài)操作樹 256

7.8  樹形網(wǎng)格（TreeGrid） 257

7.8.1  樹形網(wǎng)格的基本使用方法 258

7.8.2  復雜的樹形網(wǎng)格 263

7.9  組合樹（ComboTree） 265

7.10  組合樹形網(wǎng)格 266

7.11  小結(jié) 268

第8章  CRUD 應用 269

8.1  了解什么是CRUD 269

8.2  創(chuàng)建簡單的CRUD應用 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  服務器代碼簡介 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  自動增加網(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高級應用

第9章  開發(fā)移動頁面 287

9.1  移動端基礎 287

9.1.1  自適應屏幕寬度 287

9.1.2  移動端調(diào)試方法 288

9.1.3  EasyUI開發(fā)移動頁面基礎 289

9.2  表單 290

9.2.1  輸入框 290

9.2.2  按鈕 291

9.2.3  開發(fā)移動端登錄頁面 292

9.3  移動端頁面布局 293

9.3.1  工具欄 293

9.3.2  面板 294

9.3.3  選項卡 295

9.3.4  折疊面板 297

9.3.5  布局 297

9.3.6  菜單 298

9.3.7  樹 299

9.4  對話框 300

9.5  信息提示 300

9.6  動畫 301

9.7  數(shù)據(jù)展示 301

9.7.1  簡單的列表（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  替換本機主題樣式 306

10.3  保存主題樣式 307

10.3.1  在服務器上保存 307

10.3.2  本地保存 307

10.4  圖標的更改 308

10.5  小結(jié) 308

第11章   jQuery EasyUI的擴展 309

11.1  數(shù)據(jù)網(wǎng)格視圖 309

11.1.1  數(shù)據(jù)網(wǎng)格詳細內(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  虛擬滾動視圖（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  列的擴展（Columns Extension） 329

11.8  數(shù)據(jù)網(wǎng)格的過濾（DataGrid Filter Row） 331

11.9  數(shù)據(jù)分析器（PivotGrid） 339

11.10  DWR加速 342

11.11  RTL的支持 343

11.12  Ribbon——Office功能區(qū)界面 344

11.13  文本編輯器（TextEditor） 345

11.14  小結(jié) 347

第12章  設計一個實戰(zhàn)項目 348

12.1  登錄驗證設計 348

12.1.1  如何確認身份 349

12.1.2  如何驗證身份 350

12.1.3  登錄頁面的設計 351

12.1.4  登錄驗證系統(tǒng)設計方案 354

12.2  加密與解密技術(shù) 355

12.2.1  對稱加密 355

12.2.2  非對稱加密 356

12.2.3  不可逆加密 356

12.3  EasyUI界面框架 356

12.4  小結(jié) 358