Web前端技术丛书：jQueryEasyUI从零开始学

目前互联网开发一款产品一般都是要求快速开发，然后快速迭代，这就要求开发人员有统一的界面和支持快速开发的框架。对于前端来说，不管是PC前端还是移动前端，都要遵守UI的一致性原则。EasyUI正好节省了网页开发的时间和规模，还能在各平台保持界面完美统一，符合当下流行的用户交互方式。基本上所有互联网前端都需要用到UI技术，也都需要使用一些UI框架。在这些框架中，EasyUI是入门，也是后端做全栈技术、快速开发项目的。

本书专为Web开发人员与后端开发人员量身定制，从零开始、图文结合，使你能够快速上手前端开发技术。

本书详细介绍了EasyUI的各类组件以及在使用过程中容易遇到的一些问题，由于EasyUI版本更新较为频繁，本书在讲解时会注重向读者介绍EasyUI的设计思路，帮助读者从插件设计的高度来掌握EasyUI插件。本书附带资源和源码两个文件，其中资源文件中给出了EasyUI开发中的常用工具和资源，例如搭建本地服务器工具、图标资源等，在源码文件中给出了实用的EasyUI开发源码。

本书共3篇，12章，涵盖的主要内容有表单设计、元素的拖放和缩放、提示框、滚动条、滑块、面板、布局、窗口、自定义插件设计、数据网格、树、CRUD应用、移动端设计、主题更改、生成报表、扩展插件等。

本书内容丰富，学习门槛低，既可以作为EasyUI的参考文档，也可以作为EasyUI的入门书籍，特别适合EasyUI的初学者以及对EasyUI有部分困惑的开发人员阅读。

施尧，某环保软件公司项目主管。目前负责互联网在政务、环保等领域的应用，擅长于jQuery、Vue、React等前端框架，有着丰富的实战开发经验。

第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创建 4
1.3 搭建本地服务器 5
1.4 实战：第一个EasyUI注册页面 8
1.5 小结 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 数字框（NumberBox） 27
2.2 组合简介 33
2.2.1 组合（Combo） 33
2.2.2 组合框（ComboBox） 37
2.3 微调器简介 46
2.3.1 微调器（Spinner） 46
2.3.2 数字微调器（NumberSpinner） 48
2.3.3 时间微调器（TimeSpinner） 49
2.3.4 日期微调器（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 小结 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 容器内拖放 97
3.2.3 快速拖放 98
3.3 放置（Droppable） 99
3.3.1 放置的使用方法 99
3.3.2 授权拖放的组件 100
3.4 缩放（Resizable） 102
3.5 实战：购物车的拖放 103
3.6 小结 105
第4章 常用组件 106
4.1 提示框（Tooltip） 106
4.1.1 创建提示框 106
4.1.2 提示框可绑定的元素 108
4.1.3 提示框的内容 110
4.2 进度条（ProgressBar） 111
4.3 滑块（Slider） 112
4.4 实战：向服务器提交滑块数据 115
4.5 小结 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 创建简单的窗口 151
5.3.2 创建模态窗口 153
5.3.3 创建内联窗口 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 小结 163
第6章 深入理解EasyUI组件机制 164
6.1 使用EasyUI开发自定义组件 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 总结 181
6.4 制作起止日期框插件 182
6.5 在标记中定义组件 186
6.6 起止日期框使用文档 187
6.7 小结 190
第2篇 EasyUI数据的获取和展示
第7章 数据的获取与展示 193
7.1 使用表单向服务器提交数据 193
7.2 数据网格（DataGrid） 194
7.2.1 使用本地数据初始化数据网格 195
7.2.2 使用服务器端数据初始化数据网格 196
7.2.3 数据网格中的列 198
7.2.4 数据网格中的行 210
7.2.5 创建工具栏 214
7.2.6 数据网格事件和方法 215
7.2.7 数据网格编辑 221
7.2.8 数据网格视图 228
7.3 分页器（Pagination） 229
7.3.1 分页器概述 229
7.3.2 数据网格中的分页 233
7.4 数据列表（DataList） 236
7.5 属性网格（PropertyGrid） 239
7.6 组合网格（ComboGrid） 241
7.7 树（Tree） 244
7.7.1 树形结构简介 244
7.7.2 EasyUI中树的使用方法 245
7.7.3 可编辑的树 256
7.7.4 动态操作树 256
7.8 树形网格（TreeGrid） 257
7.8.1 树形网格的基本使用方法 258
7.8.2 复杂的树形网格 263
7.9 组合树（ComboTree） 265
7.10 组合树形网格 266
7.11 小结 268
第8章 CRUD 应用 269
8.1 了解什么是CRUD 269
8.2 创建简单的CRUD应用 270
8.2.1 查询数据（Retrieve） 270
8.2.2 增加数据（Create） 271
8.2.3 更新数据（Update） 272
8.2.4 删除数据（Delete） 273
8.2.5 提交表单 274
8.2.6 服务器代码简介 275
8.3 创建CRUD数据网格 276
8.3.1 获取数据 276
8.3.2 新增数据 277
8.3.3 更新数据 278
8.3.4 删除数据 278
8.4 自动增加网格行数据 279
8.4.1 读取数据 279
8.4.2 编辑数据 280
8.4.3 创建数据 282
8.4.4 删除数据 283
8.5 小结 284
第3篇 EasyUI高级应用
第9章 开发移动页面 287
9.1 移动端基础 287
9.1.1 自适应屏幕宽度 287
9.1.2 移动端调试方法 288
9.1.3 EasyUI开发移动页面基础 289
9.2 表单 290
9.2.1 输入框 290
9.2.2 按钮 291
9.2.3 开发移动端登录页面 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 数据展示 301
9.7.1 简单的列表（SimpleList） 301
9.7.2 数据列表（DataList） 302
9.7.3 数据网格（Datagrid） 303
9.8 小结 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 小结 308
第11章 jQuery EasyUI的扩展 309
11.1 数据网格视图 309
11.1.1 数据网格详细内容视图（DataGrid DetailView） 309
11.1.2 数据网格分组视图（DataGrid GroupView） 312
11.1.3 数据网格缓存视图（DataGrid BufferView） 314
11.1.4 虚拟滚动视图（VirtualScrollView） 315
11.1.5 自定义数据网格视图 318
11.2 可编辑的数据网格（Editable DataGrid） 320
11.3 可编辑树（Editable Tree） 322
11.4 数据网格单元格编辑（Cell Editing in DataGrid） 325
11.5 数据网格拖曳与放置（Drag and Drop Rows in DataGrid） 327
11.6 树形网格行的拖曳与放置（Drag and Drop Rows in TreeGrid） 328
11.7 列的扩展（Columns Extension） 329
11.8 数据网格的过滤（DataGrid Filter Row） 331
11.9 数据分析器（PivotGrid） 339
11.10 DWR加速 342
11.11 RTL的支持 343
11.12 Ribbon——Office功能区界面 344
11.13 文本编辑器（TextEditor） 345
11.14 小结 347
第12章 设计一个实战项目 348
12.1 登录验证设计 348
12.1.1 如何确认身份 349
12.1.2 如何验证身份 350
12.1.3 登录页面的设计 351
12.1.4 登录验证系统设计方案 354
12.2 加密与解密技术 355
12.2.1 对称加密 355
12.2.2 非对称加密 356
12.2.3 不可逆加密 356
12.3 EasyUI界面框架 356
12.4 小结 358

　　前 言
　　Web应用的本质就是信息的保存和浏览。信息的拥有者将信息保存到电脑的指定区域并对外开放，其他用户可以通过网络浏览这些信息。对于信息的拥有者来说，必须有一个可以供其保存信息的页面，这个页面可以称为管理员页面。对于信息的浏览者来说，必须有一个可以供其查看信息的页面，这个页面称为前端用户页面。
　　随着近年来互联网突飞猛进的发展，Web应用正在发生翻天覆地的变化，前端用户界面变得越来越丰富，信息的展示方式也由传统的文字变成图片、视频、动画甚至地图等元素。随着前端页面的不断丰富，传统的HTML+JavaScript+CSS开发变得更加吃力，于是各类开发框架如雨后春笋般不断涌出。开发框架的主要目的是减轻开发者的工作。目前市场上的前端框架可以分为两类，第一类框架只做“该做的事情”，第二类框架做“该做的以及不该做的事情”。我们以遥控器为例，第一类框架仅仅只是设计了遥控器的外形，至于按下遥控器上的按钮电视机该调什么台，这些事情仍然需要开发者编写代码控制。第二类框架将遥控器的外形以及功能全部设计好，开发者只需要浏览说明书即可使用。EasyUI就是第二类框架，因此它使用起来相当简单。我们知道一个简单的遥控器由数字按键、音量按键以及频道按键组成，通过使用这些按键用户即可操控一台电视机。EasyUI组件由三部分组成，分别是属性、事件和方法。通过这三部分，开发者即可完全控制EasyUI的组件。
　　EasyUI的优点也是其学习的难点，因为它封装了太多的内容，初学者在学习时常常会摸不着头脑。例如，当在EasyUI中使用文本框时，EasyUI会在构建文本框时额外创建两个输入框，分别是展示值框、存储值框，它会将开发者定义的文本框及其构建的存储值框隐藏起来，仅向用户显示其构建的展示值框，此时开发者更改自己定义的文本框风格时就会发现不起作用了。又比如EasyUI为了让开发者更灵活地初始化组件，提供了五种初始化的渠道，这些渠道可以同时初始化同一属性，但是由于它们的优先级不一样，因此最终显示结果也不一样。
　　目前图书市场上关于EasyUI开发及框架整合的图书不少，但是这些书籍通常会出现两个极端：一部分书籍中重点讲解的是实战项目，EasyUI仅仅被当作项目的一个工具来讲解，所占的讲解比例相当少；另一部分仅仅是向读者介绍EasyUI组件的属性、事件以及方法，而其如何使用却很少提及。作者力图摆脱这两个极端，在本书中以一个EasyUI初学者的角色与读者共同探讨学习，并且找出初学者容易困惑以及混淆的知识点重点讲解。
　　本书特色
　　1. 零基础入门，学习门槛低
　　本书不需要读者有太多的Web前端以及后端开发基础，对于需要用到的前端开发技术，本书都会做简要讲解；对于后端开发，读者仅需掌握后端获取数据和输出数据的参数和数据格式即可，因此本书是一本零基础入门的书籍。
　　2. 简约但不简单
　　为了方便读者更容易地掌握EasyUI的知识点，本书不做太多实战项目的分析和开发，力争每个例子仅介绍一个知识点，在源码文件中的每个例子仅介绍单个组件的使用方法。
　　3. 直击学习痛点
　　作者在论坛等技术社区收集了大量EasyUI初学者在学习中遇到的困惑，并在本书中给出解答，因此本书是一本“接地气”的书籍，直击初学者的学习痛点。
　　4. EasyUI插件源码分析和“山寨”
　　本书在第6章带领读者分析EasyUI插件的源码，并且向读者介绍了jQuery中插件的设计方法，最后带领读者“山寨”EasyUI插件的设计方法设计一个自定义插件。EasyUI插件的设计有着非常优秀的规范，因此读者掌握了它的设计规范后，无论是否在项目开发中使用EasyUI框架都将受益匪浅。
　　本书内容
　　第1篇 EasyUI的基础组件（第1～6章）
　　本篇介绍EasyUI开发中的基础组件，这些组件通常用于设计网站的布局以及向服务器提交用户输入的数据。第6章带领读者深入解析EasyUI插件的源码，在分析源码的过程中解释大量初学者容易混淆的概念以及使用方法，最后带领读者模拟EasyUI插件的设计规范设计自定义的插件。
　　第2篇 EasyUI数据的获取和展示（第7～8章）
　　本篇主要介绍EasyUI中数据的获取和展示。相对于其他前端框架，EasyUI的优势莫过于其强大的数据获取和展示功能。在第8章中向读者介绍三种使用EasyUI创建CRUD应用的方法。
　　第3篇 EasyUI高级应用（第9～12章）
　　本篇主要介绍EasyUI的高级应用，包括移动端样式的设计、主题的更改以及EasyUI常见的扩展插件。在最后一章中向读者展示使用EasyUI开发一个实战项目。
　　代码下载与反馈
　　本书读者
　　? 需要快速介入Web前端开发的程序员
　　? 需要快速掌握Web前端技术的后端开发人员
　　? 需要全面学习EasyUI开发技术的人员
　　? 网页设计人员
　　? 希望提高项目开发水平的人员
　　? 专业培训机构的网页设计与网页开发学员
　　? 软件开发项目经理
　　本书由施尧著，其他参与创作的还有陈晓珺、陈云香、王晓华、刘泽楷、薛燚、孙亚南、薛福辉、管书香、王云云、支传华、王启明、李一鸣。
　　施 尧
　　2018年8月