1、（jQuery+EasyUI 版）2015 年 9 月目 录第 1 章、jQuery 及其开发环境 11.1 J2EE 开发环境简介 .11.2 安装 Tomcat 服务器 .11.3 安装 MyEclipse.61.4 导入和建立工程文件 jQDemos.101.5 添加和配置 MyEclipse 中的 Tomcat6.x 服务器 141.6 部署 jQDemos 工程文件 161.7 安装和生成 emlab 数据库 .191.8 SQL Server2008 的网络配置 20第 2 章、EasyUI 基本表单控件 .23实例 1. 创建 EasyUI 表单及常用控件。 23实例 2. Ea
2、syUI 表单及其控件的 jQuery 语句设计。 .25实例 3. 利用绝对坐标实现表单控件的位置布局。 28实例 4. 利用 append()方法在 jQuery 中动态定义和生成 EasyUI 控件。 31实例 5. 构造控件自定义函数，简化控件的使用。 32实例 6. 控件定义函数的综合应用。 36实例 7. 使用 tabs 标签页控件分页显示多个表单控件。 38实例 8. 静态组合框 combobox 控件及其事件和初值的设置。 .39实例 9. 利用滑块（slider）控件实现图片的等比例缩放。 .40实例 10. 工具栏、菜单和消息框控件的使用。 43实例 11. 窗口控件 wi
3、ndow 的应用及其函数构造。 .46实例 12. 利用布局（layout）控件实现页面布局。 46实例 13. 获取表单中可编辑控件的名称、类型及其值。 48实例 14. 表单的键盘控制与控件聚焦。 49实例 15. 利用文件框控件 file 实现文件的上传。 .51实例 16. 服务器端文件下载的实现。 54第 3 章、EasyUI 数据库控件 .57实例 17. 构造连接数据库 Java 类，实现数据查询操作。 .57实例 18. 服务器端数据更新语句的执行。 59实例 19. 服务器端存储过程和用户定义函数的调用。 61实例 20. 动态 combobox 组合框控件的定义与初值设置。
4、 .62实例 21. 动态 combobox 组合框控件之间联动效果的实现。 .64实例 22. 服务器端取数据库中数据赋值到表单。 65实例 23. 客户端和服务器端表单数据验证。 67实例 24. 服务器端数据库记录的增删改操作。 69实例 25. 服务器端 SQL 脚本文件.sql 的运行。 74第 4 章、树与数据网格及其应用 78实例 26. 静态树 Tree 控件及其基本操作。 .78实例 27. 基于 JSON 数据的静态树加载与操作。 80实例 28. 从数据库一次性加载数据到树节点。 84实例 29. 动态树节点的分层逐级加载。 87实例 30. 动态组合树 ComboTre
5、e 控件及其应用。 .91实例 31. 静态 JSON 数据网格控件基础。 93实例 32. 动态数据库网格控件及其分页处理。 95实例 33. 数据库网格中数据的过滤与定位。 98实例 34. 可编辑数据网格及其数据增删改操作的实现。 103实例 35. 数据网格的表单关联扩展。 107实例 36. 树形网格（TreeGrid）的综合应用。 .110第 5 章、图表统计及其应用 119实例 37. FusionCharts 单序列图表及应用。 .119实例 38. FusionCharts 多序列图表及应用。 .122实例 39. FusionCharts 图表向下钻取。 .124实例 40
6、. 带多层表头和汇总行的数据网格及其 Excel 文件输出。 .130附录 1、jQDemos 自定义控件函数 .136附录 2、JavaScript 常用函数 .144第 1 章、jQuery 及其开发环境jQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 JS 库 ，兼容 CSS3 和各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后续版本将不再支持 IE6/7/8浏览器。jQuery 能更方便地处理 HTML 和为网站提供 AJAX 交互。jQuery 另一个比较大的优
7、势是其文档说明齐全，同时还有许多成熟的插件可供选择。jQuery 的核心理念是 write less、do more（写得更少，做得更多），最早在 2006 年 1 月由美国人 John Resig 发布。如今， jQuery 已经成为最流行的 javascript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。jQuery 是免费、开源的，使用 MIT 许可协议。jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。除此以外，jQuery 提供 API 让开发者编写插件。其
8、模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思义，也就是 JavaScript 和查询（Query ），即辅助 JavaScript 开发的库。1.1 J2EE 开发环境简介 服务器：Tomcat6.0 及以上。 数据库：SQL Server2008 。 程序开发环境：MyEclipse6.5 及以上。 程序设计语言：客户端 Javascript（JS） 、服务器端 JSP、JAVA。 jQuery 插件库：EasyUI 等。1.2 安装 Tomcat 服务器1.2.1 Tomcat6.0 及安装步骤将文件夹 apache-tomcat-6.0.30
9、复制到 C 盘根目录下，即可完成 Tomcat6.0 的安装过程，这时C: apache-tomcat-6.0.30 文件夹下包括图 1-1 所示内容：图 1-1 Tommcat6.0 文件目录1.2.2 安装 JDK打开 C:Program FilesJava 这个文件夹，如果存在 jdk*和 jre*两个子文件夹，表明 Windows 系统已经安装了 JDK，如果不存在 C:Program FilesJava 及其子文件夹，则需要安装 JDK。对没有安装 JDK 的操作系统，下面以 jdk-7 为例，阐述 JDK 安装过程。点击安装程序，开始安装过程。选择 JDK 默认安装路径（如图 1-
10、2 所示） ，不作更改。图 1-2 JDK 安装过程（选择默认安装路径）同样安装 JRE 时选择默认安装路径，即与 JDK 安装在同一个 java 文件夹下（如图 1-3 所示）。安装成功后关闭窗体。图 1-3 JRE 安装过程（选择默认安装路径）图 1-4 JDK 安装结束界面1.2.3 设置 JDK 环境变量以 Win7 为例（如果已经安装 JDK，直接设置环境变量）：右击“我的电脑” ，选择“ 属性 ”，选择“高级系统设置”，这时出现图 1-5 界面。图 1-5 JDK 环境变量配置（选择高级系统设置）点击上图中的“环境变量” 按钮，在“ 系统变量”中新建 JAVA_HOME 变量。变量
11、值填写 JDK的安装目录（例如 C:Program FilesJavajdk1.7.0_4。图 1-6 JDK 环境变量配置（新建 JAVA_HOME 变量）系统变量中找到 Path 变量，点击 “编辑”（如图 1-6 所示） 。在变量值这一栏中输入：%JAVA_HOME%bin;%JAVA_HOME%jrebin;注意：最后一个分号必须输入。图 1-6 JDK 环境变量配置（编辑 PATH 变量）在“系统变量” 中新建 CLASSPATH 变量（如图 1-7 所示） 。变量值填写如下：.;%JAVA_HOME%lib;%JAVA_HOME%libtools.jar注意：最前面有一个点。系统变
12、量配置完毕，按“确定”按钮退出。图 1-7 JDK 环境变量配置（新建 CLASSPATH 变量）检验是否配置成功。运行 cmd （或在命令行中）输入 java -version （注意：java 和 -version 之间有空格） 。若出现图 1-8 所示结果，显示 JDK 版本信息，则说明 JDK 安装和配置成功。图 1-8 JDK 环境变量配置成功重启计算机，JDK 环境变量设置方可生效。1.2.4 Tomcat6.0 的启动和停止打开 C: apache-tomcat-6.0.30bin 文件夹，点击其中的 startup.bat 文件，即可启动 Tomcat6.0服务器，这时屏幕上出
13、现图 1-9 所示信息，表明 Tomcat 服务器已经开启并将一直保持运行状态。图 1-9 Tomcat6.0 启动运行界面也可以通过打开一个游览器（建议使用 Google 的 Chrome 游览器） ，在游览器地址栏输入下列地址：http:/127.0.0.1:8080 。如果出现图 1-10 所示页面，则表明 Tomcat 安装成功并已启动。图 1-10 Tomcat 配置成功启动页面在 startup.bat 所在的同一文件夹中，点击其中的 shutdown.bat 文件，即可停止和关闭Tomcat 服务器。注意：在安装 MyEclipse 之后，通常在 MyEclipse 开发环境中开
14、启和关闭 Tomcat服务器。这时需要按照上一步的操作方法，关闭 Tomcat 服务器，否则在 MyEclipse 无法开启服务器。1.2.5 设置 Tomcat 端口号在启动 Tomcat 的过程中，有些系统可能会出现错误，其中一种可能是端口号 8080 与其他应用程序发生冲突，这时需要修改或重新设置端口号。重新设置端口号的方法如下：在 C:apache-tomcat-6.0.30conf文件夹中，用记事本打开编辑 server.xml 配置文件；在该文件中搜索 8080 字符串（如图 1-11 所示） ，将下列行中的 port=“8080“改成port=“8088“：图 1-11 Serv
15、er.xml 配置文件查找 8080 端口改为：改为：保存 server.xml 文件后退出，重新启动 Tomcat，然后在游览器中输入下列地址：http:/127.0.0.1:80881.3 安装 MyEclipse这里以 MyEclipse6.5 为例，描述安装过程。点击打开安装文件，开始安装过程（如图 1-12 所示） 。图 1-12 运行 myEclipse6.5 安装程序选择默认路径安装（如图 1-13 所示） 。图 1-13 选择默认路径安装 myEclipse6.5点击 “Install”正式开始安装（如图 1-14 所示） 。图 1-14 正式开始 myEclipse6.5 安
16、装过程正在安装，请稍候（如图 1-15 所示） 。图 1-15 myEclipse6.5 安装过程进行中安装完毕后，选择“Launch MyEclipse6.5”，关闭“Open the release notes”，这时安装程序将打开和启动 MyEclipse（如图 1-16 所示） 。图 1-16 myEclipse6.5 安装成功结束启动进入 MyEclipse，需要几分钟（如图 1-17 所示，有点慢哦） 。图 1-17 启动打开 myEclipse6.5 程序输入 Workspace 工作目录（例如 d:myjsp，如图 1-18 所示） ；在后面复选框中（Use this as t
17、he default and do not ask again）打上勾，然后点击 OK 按钮。图 1-18 配置 myEclipse6.5 的工作文件目录这时出现 MyEclipse 编辑界面。稍后在屏幕会跳出一个子窗体，要求输入注册码。图 1-19 提示输入 myEclipse6.5 注册码和序列号点击 “Enter Subscription ”，输入用户名和注册码如下（如图 1-20 所示） 。administratornLR8ZC-855550-60675256396752354图 1-20 输入 myEclipse6.5 注册码和序列号如果需要重新注册，可在工具栏中点击 Window+
18、Preferences 菜单，在菜单树中找到MyEclipse Enterpise Workbence 之下的 Subscription 菜单（如图 1-22 所示） ，点击该菜单后在右侧屏幕中输入注册码。图 1-22 修改 myEclipse6.5 注册码和序列号关闭 MyEclipse 的 Welcome 栏目，出现下列 MyEclipse 工作环境，至此 MyEclipse 安装结束（如图 1-23 所示） 。图 1-23 myEclipse6.5 程序设计与调试环境1.4 导入和建立工程文件 jQDemos将 jQDemos.rar 文件复制到 d:myjsp 文件夹中，这个文件夹中一
19、开始时只有一个子文件夹和这个压缩文件（如图 1-24 所示） 。图 1-24 jQDemos 工程文件解压按右键将 jQDemos.rar 解压到 当前文件夹 （即 d:myjsp 文件夹）下（如图 1-25 所示） 。图 1-25 jQDemos 工程文件解压后的文件夹返回到 MyEclipse 程序设计环境（如图 1-26 所示） ，点击工具栏中的 File+Import 菜单，导入工程文件夹 jQDemos。图 1-26 选择导入 jQDemos 工程在下图中选择 Existing Projects into Workspace 菜单，点击“Next” 按钮（如图 1-27 所示） 。图
20、 1-27 选择从现有的工程中导入 jQDemos 到工作文件夹点击下图中的 Browse 按钮，在弹出的子窗体中选择 d:myjspjQDemos 文件夹（如图 1-28所示，注意不要选择后面的子文件夹）图 1-28 导入 jQDemos 工程时选择文件夹为 jQDemos点击上图 1-28 中的“ 确定”按钮，出现图 1-29 所示界面。在图 1-29 的 Copy projects into workspace 中打上钩；点击“Finish”按钮。图 1-29 导入 jQDemos 工程结束这时在 MyEclipse 中出现下列界面（如图 1-30 所示） ，即已经存在一个工程文件jQD
21、emos。图 1-30 导入 jQDemos 工程成功1.5 添加和配置 MyEclipse 中的 Tomcat6.x 服务器在 MyEclipse 中点击 Window+Preferences 菜单（如图 1-31 所示） 。图 1-31 在 myEclipse6.5 中配置 Tomcat6.0 在图 1-32 所示的左侧菜单树中输入框“type filter text”中输入“tomcat”这个字符进行过滤；在菜单树选中 Tomcat 6.x；点击右侧的第一个 Browse 按钮，选中 Tomcat6.0 所在的文件夹位置（不要点击到子文件夹哦） ，即 C:apache-tomcat-6.
22、0.30。点击 “确定”按钮。图 1-32 选择 Tomcat6.x 所在的文件夹这时屏幕出现图 1-33 所示界面。点中右上侧的无线按钮“Enable”，再点击 OK 后，屏幕关闭，返回到 MyEclipse 界面，这时 Tomcat 配置结束。图 1-33 选中 Tomcat6.0 文件夹并激活开启 myEclipse 中的 Tomcat6.x 服务器。先使用 shutdown.bat 关闭命令行中的 Tomcat 服务器（方法见 1.2.4） ，点击 MyEclipse 工具栏中的“Start”小按钮，选择 Tomcat 6.x+Start 菜单（如图1-34 所示） 。图 1-34 在
23、 myEclipse6.5 中启动 Tomcat6.0这时屏幕下方出现下列信息（如图 1-35 所示） ，至此 Tomcat 服务器在 MyEclipse 中配置结束。图 1-35 myEclipse6.5 中启动 Tomcat6.0 成功提示信息1.6 部署 jQDemos 工程文件点击 MyEclipse 窗体工具栏中的一个 “部署”（Deploy）小按钮（如图 1-36 所示） 。图 1-36 myEclipse6.5 中部署 jQDemos 工程这时屏幕出现图 1-37 界面。在 Project 组合框中选中 jQDemos（其实这时只有这个选项） 。图 1-37 myEclipse6
24、.5 中将 jQDemos 工程部署到 Tomcat6.0 中去点击上图 1-37 右侧的“Add”按钮，出现图 1-38 界面。在 Server 组合框中选中“Tomcat 6.x”。图 1-38 myEclipse6.5 中选择 Tomcat6.0 服务器点击图 1-38 中的“Finish”按钮，这时出现部署工程项目文件的过程（如图 1-39 所示） 。图 1-39 myEclipse6.5 提示正在部署 jQDemos 工程到 Tomcat6.0部署完成后，出现图 1-40 所示界面。此时，点击“OK”按钮，关闭部署过程。第二次部署某个工程时，可以点击“Redeploy”（重新部署）按
25、钮。图 1-40 myEclipse6.5 中部署 jQDemos 工程成功程序编辑。打开 jQDemos 文件夹+WebRoot，找到 example01_basicform.jsp 程序。这时可能出下列屏幕（如图 1-41 所示） ，暂时无法看到该程序的源码。图 1-41 myEclipse6.5 中打开 jQDemos 工程文件点击图 1-41 中上面的小图标按钮或关闭 example01_basicform.jsp 程序再打开，这时屏幕窗体正常，出现源程序代码如下（如图 1-42 所示）：图 1-42 myEclipse6.5 中编辑 jQDemos 工程文件安装和打开 Google
26、的 Chrome 游览器；在游览器中输入下列地址：http:/127.0.0.1:8080/jQDemos/example02_formcontrols.jsp.jsp。这时出现图 1-43 所示的程序运行界面页面，至此 J2EE 环境安装成功。图 1-43 在 Chrome 游览器中成功运行 jQDemos 页面1.7 安装和生成 emlab 数据库第一种方法：将数据库备份文件 emlab64.bak 复制到 d:myjsp 文件夹下；打开 SQL Server2008，输入下列命令，从备份中恢复数据库：use masterif (db_id(emlab) is not null) drop
27、 database emlabrestore database emlab from disk=d:myjspemlab64.bak with replace此方法只适用于Win7+64位操作系统。Win7+32 位操作系统的数据库备份文件为emlab32.bak，数据恢复命令与上面相同。第二种方法：打开 d:myjspjQDemosWebRoot文件夹下的一个子文件夹 sqlscript，在 SQL Server2008 数据库系统中执行这个文件夹下的所有 .sql 脚本文件（如图 1-44 所示） 。注意必须先运行 emlab.sql，创建所有数据表结构，然后关闭这个文件。这时，数据表结构
28、已经存在，但是没有记录的空表，执行其他脚本文件可生成模拟数据。emlab.sql 只能执行一次，如果再次执行，其他脚本文件生成的模拟数据会被删除，又需要重新运行这些脚本文件。图 1-44 emlab 数据库脚本文件清单1.8 SQL Server2008 的网络配置执行 Microsoft SQL Sever2008 菜单下的配置工具中找到“SQL Server 配置管理器”（如图 1-45 所示） ，点击该菜单。图 1-45 找到 SQLServer 数据库配置管理器展开菜单树，选中“MSSQLSERVER 的协议”（位于图 1-46 左侧） ，点击图 1-46 右侧的“TCP/IP”选项。
29、图 1-46 配置 MSSQLSERVER 协议中的 TCP/IP 选项在下图左侧的“协议”栏目中，将“TCP/IP”的“已启用”状态设置为“是”，然后在图 1-47 右侧的“IP 地址 ”栏目中，将第一个 IP1 和最后一个 IPALL 中的 TCP 端口值都设置成“1433”。点击“确定”按钮后返回到前一个窗口界面。图 1-47 配置 MSSQLSERVER 协议中的 TCP 端口号点击下图 1-48 所示的屏幕左侧菜单树中的“SQL Server 服务”，在该图屏幕的右侧中找到SQL Server（MSSQLSERVER 或 SQLEXPRESS） ，并双击该菜单。图 1-48 查找 M
30、SSQLSERVER 服务这时，在下图 1-49 所示的屏幕中点击“重新启动” 按钮，数据库服务被重新启动。启动结束后，返回至上一界面，这时显示 SQL Server（MSSQLSERVER）正在运行。至此在 J2EE 中数据库配置结束。图 1-49 重新启动 MSSQLSERVER 服务打开游览器，在地址栏中输入：http:/127.0.0.1:8080/jQDemos/ 。这时程序开始运行，如果出现下列界面（如图 1-50 所示） ，则表明 J2EE 已成功连接到 SQL Server 数据库 emlab。至此数据库连接和配置成功，J2EE 全部安装完毕！图 1-50 MSSQLSERVE
31、R 数据库配置连成功第 2 章、EasyUI 基本表单控件实例 1. 创建 EasyUI 表单及常用控件。本例创建一个包含jQuery插件的jsp文件，阐述jQuery的页面程序的基本结构。该页面包含一个EasyUI 的表单控件、四个 textbox文本框、一个combobox 组合框和两个linkbutton按钮控件。页面布局使用基本的HTML表格（ Table）标签。页面程序在之间使用标签引用jQuery 的几个样式文件和jQuery.min.js、jQuery.EasyUI.min.js、EasyUI-lang-zh_CN.js三个插件库文件。本实例程序运行界面如图2-1所示，完整程序代码见程序2-1 。图2-1 EasyUI表单及常用控件程序运行界面程序2-1. example01_formbasic.jspEasyUI表单控件基础 姓名:Email:课程:备注:语言:中文英文日文提交清空function submitForm()$(#form1).form(submit); /jQuery语句function clearForm()$(#form1).form(clear); /jQuery语句
