Struts2+JQuery插件的使用

系统教程390 更新时间：2026-04-04 16:43:10

2023年11月28日发(作者：)

1

吴老师教学讲义

抚之忽

尺，然

而抚

已尺

一

人

、

一

桌

、

吴老师教学讲义

2

Struts2—使用JQuery插件(2)

本节介绍更多更高级的JQuery控件.

1. 首先做好基本配置，这次将JSON 插件一起加入

struts2xml文件

<default-action-ref name="index" />

<result type="redirectAction">/result>

action>

package>

struts>

吴老师教学讲义

3

package>

struts>

2. 选项卡效果

2.1选项卡的内容在本地

新建

<%@ page language="java" pageEncoding="UTF-8"%>

<%--引入Struts标签库--%>

<%@taglib prefix="s" uri="/struts-tags"%>

<%--引入Struts jquery插件标签库--%>

<%@taglib prefix="sj" uri="/struts-jquery-tags"%>

<html>

<head>

<title>首页title>

<sj:head jqueryui="true" />

head>

<body>

body>

html>

关于JqueryUI 插件:

在Jquery官方，提供了很多的jquery插件，其中jqueryUI 是一套关于用户界面的

插件，使用它可以很方便的做出各种界面效果，而且还提供了themes 各种主题包的下载，

可以很方便的更换主题

吴老师教学讲义

4

在为Struts2做插件的时候，struts2-jquery插件将jquery官方的 jquery核心js文件，还有

jquery的UI插件，以及主题(themes)都打进了jar包中，如下图

在文件中添加如下代码:

吴老师教学讲义

5

运行该jsp文件，效果如下:

字体有些大，我们可以通过css将字体进行调整

上面我们使用标签引入jquery库的时候，只是使用

<sj:head jqueryui="true" />

引入了jqueyUI，此时会有一个默认的themes被应用。我们可以查看生成的HTML

源代码：

吴老师教学讲义

6

可以看到themes的名称为 smoothness,那么插件包中都提供了那些themes呢，

我们可以查看文件:

可以看到提供了 cupertino ,darkness,lightness, redmod,smoothness 这样的几

个风格，其中 smoothness是默认的风格.

2.2改变风格

如何改变风格呢?很简单在 head />中只需要给jquerytheme属性设置风格名

称即可:

做完这个设置之后，浏览页面：

可以看到这个页面的风格发生了变化

吴老师教学讲义

7

插件包中提供的主题毕竟有限，如果我们需要更多的主题，我们可以到jquery官方

网站下载更多的主题，甚至可以使用官网提供的在线工具定制出我们需要的主题.

Jquey首页:

定制主题(theme)

下载定制好的主题:

吴老师教学讲义

8

下载之后的文件, 这里我下载的是名称为start的themes：

进入development-bundle 文件夹:

进入themes文件夹

吴老师教学讲义

9

里面有两个themes，一个是base，一个是start，这两个文件夹的目录结构都是一

样的，不光是这两个一样，所有的jquery UI的themes目录结构都是一样的，里面都是

一些css样式，还有图片文件。

文件中已近包含

关于下载包中的其它文件，

了。我们只需要themes文件夹中的主题文件夹

那么我们如何在项目中应用下载的主题呢？参考官方文档中标签的说

明，我们可以做如下的操作:

在WEB-Root中新建一个文件夹:

将下载的start 主题包拷贝到这个文件夹中:

吴老师教学讲义

10

下面我们对比一下我们下载的主题包与插件包中自带的主题包的区别:

插件包中的主题下载的主题

我们发现下载的文件与标准jar包中的不一样。仔细对比发现下载的

start中的并不完整，其它的部分分布在 ,文件中。

所以要想使用完整的，只需要将其它部分的加入进来即可。

吴老师教学讲义

11

仔细观察我们发现还有一个文件，文件，该文件其实是

在我们网站下载的时候定制的，我们定制了多少内容，它里面就有多少内容。而我下载的

时候定制的是全部的内容，所以只需要将该文件的文件名改名为，然后将

其它的css文件删除即可.

修改标签，指定主题名称,和自定义主题安装目录:

<sj:head jqueryui="true" jquerytheme="start" customBasepath="jqueryThemes" />

运行jsp：

吴老师教学讲义

12

2.3定制皮肤

多下载几个themes放入到应用各中。在jsp页面中放几个链接，当点击链接的时候

传递 themes的名称到Action，这里不需要编写Action类，使用默认的Action即可，

只需要在文件中做配置即可，让重新返回到 jsp页面，然后我们可以

使用标签取出传递的themes名称即可

以下是下载的thems：

在页面上添加链接

吴老师教学讲义

13

配置Action 。在文件中配置

<result>/result>

action>

package>

struts>

修改页面:

吴老师教学讲义

14

吴老师教学讲义

15

2.4选项卡的内容在远程服务器，通过ajax方式获取

新建文件，内容如下

新建RemoteTabAction类

吴老师教学讲义

16

部署Action，在

<result>/result>

action>

<result>/result>

action>

package>

struts>

新建

3. 日历控件

新建文件

运行效果:

吴老师教学讲义

17

我们发现出来的是英文界面。在文件中可以看到一

些国际化文件：

吴老师教学讲义

18

这些js文件需要引入到页面才会生效，默认是英文。查看标记的说明文档，

我们发现了locale 这样一个属性，这个属性可以用来导入国际化的js文件，那那这个属

性的值写成什么呢？当然不能胡写，我们仔细观察这些js文件，因为我们需要用到日历，

所以仔细观察日历相关的js文件：

很显然，如果要显示简体中文，应该写: zh-CN，所

以修改文件中的内容:

再次运行：

吴老师教学讲义

19

如果需要选择很久以前的日期或者以后的日期，很显然上面的方式就不是很方便了，

我们需要提供可以选择的年和月:

在文件中添加如下代码:

面的是在非IE中的运行结果，如果在IE中效果就不是那样了：

吴老师教学讲义

20

为此，需要对样式进行修正。只需要自己再定义一个样式，覆盖掉原来的样式即可，

所以新建一个样式文件

pack_

内容如下:

.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; }

.ui-datepicker -datepicker-month-year {width: 100%;}

.ui-datepicker -datepicker-month,

.ui-datepicker -datepicker-year { width: 40%;}

.ui-datepicker .ui-datepicker-title -datepicker-year { float: left; }

/* 控制字体大小

.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font-size:1.2em}

*/

吴老师教学讲义

21

然后引入css文件：

修正后的效果:

4. 对话框

点击按钮的时候，弹出对话框。

新建一个jsp页面,

吴老师教学讲义

22

点击一个连接，打开一个对话框

modal =”true” 表示该对话框是一个模态窗口

cssClass :中写了三个样式:

buttonlink 是自定义的样式，ui-state-default ui-corner-all是jQuery UI中定义的样式，

我们不用管

<sj:dialog id="myclickdialog" autoOpen="false" modal="true" title="模态对话框">

点击链接弹出对话框

sj:dialog>

<sj:a openDialog="myclickdialog" cssClass="buttonlink ui-state-default ui-corner-all">

打开模态对话框

sj:a>

5. 表格

吴老师教学讲义

23

新建。在这个页面中演示如何使用表格，表格中的数据通过Ajax请求取

得。有一点要注意：Jquery UI中并没有表格，这个表格使用的是另外一个JQuery插件，

名字叫jqGrid ,这个插件被一起整合到了

.

中了。

5.1首先准备一个Action

该Action为表格提供数据.Action中取得数据，然后将数据通过JSON格式返回给

页面。这里设计几个辅助类来完成.

Student类封装学生对象

PageBean类封装页面中要显示的相关数据

StudentDAO类，提供 PageBean对象

Student类封装学生对象

吴老师教学讲义

24

PageBean类封装页面中要显示的相关数据

StudentDAO类，提供 PageBean对象

吴老师教学讲义

25

吴老师教学讲义

26

我们发现出现了一些问题。我们前面使用:

locale=”zh-CN” 导入了中文国际化js文件，我们可以看看生成的源代码：

再看看中有关国际化的js文件:

我们看到根本没有文件，而文件是有

的，这是文件本身的问题，此时就需要将jar包中的

文件改名成，然后重新打包：

吴老师教学讲义

27

再次运行:

我们发现，不但字体比较难看，而且低下的文本框还隐藏了一半，这个问题同样存在

于firefox 中。这主要是因为这个文档没有在HTML文档中加入 DOCTYPE声明，它指

定当前使用哪种规范进行验证。所以文档的开始部分加入下面的代码:

吴老师教学讲义

28

现在看起来正常了。但是在firefox中显示的时候，字体偏小。因为表格使用的是 jar

包中的文件中的样式，在该样式表中有一个类样式:

.ui-jqgrid {

font-size:11px;

}

可以看到字体是11 px ,为了兼容所有的浏览器，我们可以在文档中覆盖掉这个样式,

在文件的样式中添加如下代码:

然后再次在firefox中运行:

吴老师教学讲义

29

现在字体好看多了

5.3编辑表格

将另存为, 然后修改sj:grid 标签中的两个属性:

navigator: true 表格底部左侧的导航，包括增加，删除，修改，查询的图标

viewrecords: true 表格底部右侧的记录统计显示

吴老师教学讲义

30

隐藏掉修改，删除，查询三个按钮

吴老师教学讲义

31

当我们点击 “+” 想添加一条记录的时候效果如下:

可以看到，弹出窗口中没有输入框。为了出现输入框，我们需要在sj:gridColumn中

设置属性:

吴老师教学讲义

32

如果想将性别编程下拉框，需要继续设置属性:

那么当点击提交之后向服务器提交的地址是什么，又提交了什么数据呢?

首先，要通过editurl设定一个提交的地址，增加，删除，修改都会发送到这个地址

上。上面的学号让自动生成，所以不用填入学号，做如下修改:

吴老师教学讲义

33

那么当输入信息之后，输入数据将会被提交到EditAction上,那么提交的参数是什么

呢？

中的name属性就是提交的参数，提交的方式是post方式。

还有一点要注意: 由于增加，删除，修改提交的url都是同一个，那么服务端如何知道是那种操作呢？它

们在提交的时候，使用一个参数来加以区分，

增加 : oper=add

删除 :oper=del

修改: oper=edit

吴老师教学讲义

34

编写Action

吴老师教学讲义

35

5.4删除操作:

将另存为

修改配置:

吴老师教学讲义

36

点击“删除”按钮之后，提交的信息是:

oper=del&id=108,109

5.5点击自定义按钮，进行增加操作.

将另存为

添加一个按钮:

onClicktopics相当于是一个事件的标识，”addRow”就是标识的名字，将这个标

识注册到一个函数上:

吴老师教学讲义

37

$.subscribe是引入的另外一个jQuery插件库.当按钮上发生点击事件的时候，会调

用注册的方法

$(‘#gridtable’).jqGrid() 方法是jqGrid插件定义的方法，这个方法可以弹出窗口，

至于是什么样的窗口，由参数指定

和前面效果一样了。至于删除，更新的操作，跟增加类似

吴老师教学讲义

38

本文发布于:2023-11-28，感谢您对本站的认可！

本文链接:https://www.fzithome.com/xitong/1701128217a19725.html

Struts2+JQuery插件的使用

发布评论取消回复

最近发表

相关推荐

标签列表

Struts2+JQuery插件的使用

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复