2015-jQuery实例教材911.doc

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、2. EasyUI 表单及其控件的 jQuery 语句设计。 .25实例 3. 利用绝对坐标实现表单控件的位置布局。 .28实例 4. 利用 append()方法在 jQuery 中动态定义和生成 EasyUI 控件。 .31实例 5. 构造控件自定义函数，简化控件的使用。 .32实例 6. 控件定义函数的综合应用。 .36实例 7. 使用 tabs 标签页控件分页显示多个表单控件。 .38实例 8. 静态组合框 combobox 控件及其事件和初值的设置。 .39实例 9. 利用滑块（slider）控件实现图片的等比例缩放。 .40实例 10. 工具栏、菜单和消息框控件的使用。 .43实例

3、11. 窗口控件 window 的应用及其函数构造。 .46实例 12. 利用布局（layout）控件实现页面布局。 .46实例 13. 获取表单中可编辑控件的名称、类型及其值。 .48实例 14. 表单的键盘控制与控件聚焦。 .49实例 15. 利用文件框控件 file 实现文件的上传。 .51实例 16. 服务器端文件下载的实现。 .54第 3 章、EasyUI 数据库控件 .57实例 17. 构造连接数据库 Java 类，实现数据查询操作。 .57实例 18. 服务器端数据更新语句的执行。 .59实例 19. 服务器端存储过程和用户定义函数的调用。 .61实例 20. 动态 combob

4、ox 组合框控件的定义与初值设置。 .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. 动态树节点的分层逐级加载。

5、 .87实例 30. 动态组合树 ComboTree 控件及其应用。 .91实例 31. 静态 JSON 数据网格控件基础。 .93实例 32. 动态数据库网格控件及其分页处理。 .95实例 33. 数据库网格中数据的过滤与定位。 .98实例 34. 可编辑数据网格及其数据增删改操作的实现。 .103实例 35. 数据网格的表单关联扩展。 .107实例 36. 树形网格（TreeGrid）的综合应用。 .110第 5 章、图表统计及其应用 .119实例 37. FusionCharts 单序列图表及应用。 .119实例 38. FusionCharts 多序列图表及应用。 .122实例 39.

6、 FusionCharts 图表向下钻取。 .124实例 40. 带多层表头和汇总行的数据网格及其 Excel 文件输出。 .130附录 1、jQDemos 自定义控件函数 .136附录 2、JavaScript 常用函数 .144软件开发工具（jQuery ） 实例教程- 1 -第 1 章、jQuery 及其开发环境jQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 JS 库 ，兼容 CSS3 和各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后续版本将不再支持 IE6/7

7、/8浏览器。jQuery 能更方便地处理 HTML 和为网站提供 AJAX 交互。jQuery 另一个比较大的优势是其文档说明齐全，同时还有许多成熟的插件可供选择。jQuery 的核心理念是 write less、do more（写得更少，做得更多），最早在 2006 年 1 月由美国人 John Resig 发布。如今， jQuery 已经成为最流行的 javascript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。jQuery 是免费、开源的，使用 MIT 许可协议。jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、

8、制作动画效果、事件处理、使用 Ajax 以及其他功能。除此以外，jQuery 提供 API 让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思义，也就是 JavaScript 和查询（Query ），即辅助 JavaScript 开发的库。1.1 J2EE 开发环境简介 服务器：Tomcat6.0 及以上。 数据库：SQL Server2008 。 程序开发环境：MyEclipse6.5 及以上。 程序设计语言：客户端 Javascript（JS） 、服务器端 JSP、JAVA。 jQuery 插件库：EasyUI 等。1.2 安装 T

9、omcat 服务器1.2.1 Tomcat6.0 及安装步骤将文件夹 apache-tomcat-6.0.30 复制到 C 盘根目录下，即可完成 Tomcat6.0 的安装过程，这时C: apache-tomcat-6.0.30 文件夹下包括图 1-1 所示内容：图 1-1 Tommcat6.0 文件目录软件开发工具（jQuery ） 实例教程- 2 -1.2.2 安装 JDK打开 C:Program FilesJava 这个文件夹，如果存在 jdk*和 jre*两个子文件夹，表明 Windows 系统已经安装了 JDK，如果不存在 C:Program FilesJava 及其子文件夹，则需要

10、安装 JDK。对没有安装 JDK 的操作系统，下面以 jdk-7 为例，阐述 JDK 安装过程。点击安装程序，开始安装过程。选择 JDK 默认安装路径（如图 1-2 所示） ，不作更改。图 1-2 JDK 安装过程（选择默认安装路径）同样安装 JRE 时选择默认安装路径，即与 JDK 安装在同一个 java 文件夹下（如图 1-3 所示）。安装成功后关闭窗体。图 1-3 JRE 安装过程（选择默认安装路径）软件开发工具（jQuery ） 实例教程- 3 -图 1-4 JDK 安装结束界面1.2.3 设置 JDK 环境变量以 Win7 为例（如果已经安装 JDK，直接设置环境变量）：右击“我的电

11、脑” ，选择“ 属性 ”，选择“高级系统设置”，这时出现图 1-5 界面。图 1-5 JDK 环境变量配置（选择高级系统设置）点击上图中的“环境变量” 按钮，在“ 系统变量”中新建 JAVA_HOME 变量。变量值填写 JDK的安装目录（例如 C:Program FilesJavajdk1.7.0_4。图 1-6 JDK 环境变量配置（新建 JAVA_HOME 变量）软件开发工具（jQuery ） 实例教程- 4 -系统变量中找到 Path 变量，点击 “编辑”（如图 1-6 所示） 。在变量值这一栏中输入：%JAVA_HOME%bin;%JAVA_HOME%jrebin;注意：最后一个分号必

12、须输入。图 1-6 JDK 环境变量配置（编辑 PATH 变量）在“系统变量” 中新建 CLASSPATH 变量（如图 1-7 所示） 。变量值填写如下：.;%JAVA_HOME%lib;%JAVA_HOME%libtools.jar注意：最前面有一个点。系统变量配置完毕，按“确定”按钮退出。图 1-7 JDK 环境变量配置（新建 CLASSPATH 变量）检验是否配置成功。运行 cmd （或在命令行中）输入 java -version （注意：java 和 -version 之间有空格） 。若出现图 1-8 所示结果，显示 JDK 版本信息，则说明 JDK 安装和配置成功。图 1-8 JDK

13、 环境变量配置成功重启计算机，JDK 环境变量设置方可生效。1.2.4 Tomcat6.0 的启动和停止打开 C: apache-tomcat-6.0.30bin 文件夹，点击其中的 startup.bat 文件，即可启动 Tomcat6.0服务器，这时屏幕上出现图 1-9 所示信息，表明 Tomcat 服务器已经开启并将一直保持运行状态。软件开发工具（jQuery ） 实例教程- 5 -图 1-9 Tomcat6.0 启动运行界面也可以通过打开一个游览器（建议使用 Google 的 Chrome 游览器） ，在游览器地址栏输入下列地址：http:/127.0.0.1:8080 。如果出现图

14、1-10 所示页面，则表明 Tomcat 安装成功并已启动。图 1-10 Tomcat 配置成功启动页面在 startup.bat 所在的同一文件夹中，点击其中的 shutdown.bat 文件，即可停止和关闭Tomcat 服务器。注意：在安装 MyEclipse 之后，通常在 MyEclipse 开发环境中开启和关闭 Tomcat服务器。这时需要按照上一步的操作方法，关闭 Tomcat 服务器，否则在 MyEclipse 无法开启服务器。1.2.5 设置 Tomcat 端口号在启动 Tomcat 的过程中，有些系统可能会出现错误，其中一种可能是端口号 8080 与其他应用程序发生冲突，这时需

15、要修改或重新设置端口号。重新设置端口号的方法如下：在 C:apache-tomcat-6.0.30conf文件夹中，用记事本打开编辑 server.xml 配置文件；在该文件中搜索 8080 字符串（如图 1-11 所示） ，将下列行中的 port=“8080“改成port=“8088“：软件开发工具（jQuery ） 实例教程- 6 -图 1-11 Server.xml 配置文件查找 8080 端口改为：改为：保存 server.xml 文件后退出，重新启动 Tomcat，然后在游览器中输入下列地址：http:/127.0.0.1:80881.3 安装 MyEclipse这里以 MyEclipse6.5 为例，描述安装过程。点击打开安装文件，开始安装过程（如图 1-12 所示） 。图 1-12 运行 myEclipse6.5 安装程序软件开发工具（jQuery ） 实例教程- 7 -