4.1.8 radiobutton标签 4.1.9radiobuttons标签

发表于 更新于 分类于 ， ， Waline： 本文字数： 13k 阅读时长 ≈ 12 分钟

4.1.8 radiobutton标签

用途 渲染成单元按钮

Spring MVC的radiobutton标签会被渲染为一个类型为radio的普通HTML input标签。

属性

radiobutton标签可使用如表4.9所示的属性。 表4.9中列出的只是Spring MVC的radiobutton标签的常用属性， 并没有包含HTML的相关属性。

属性 描述
cssClass 定义要应用到被渲染的radiobutton元素的CSS类
cssStyle 定义要应用到被渲染的radiobutton元素的CSS样式
cssErrorClass 定义要应用到被渲染的radiobutton元素的CSS类,如果bound属性中包含错误,则覆盖cssClass属性值
htmlEscape boolean值,表示被渲染的值是否应该进行HTML转义
path 要绑定的属性路径
label 要作为label被渲染复选框的值

示例：radiobutton标签的使用

项目结构

展开/折叠
G:\Desktop\随书源码\Spring+Mybatis企业应用实战(第2版)\codes\04\RadiobuttonTest
├─src\
│ └─org\
│   └─fkit\
│     ├─controller\
│     │ └─UserController.java
│     └─domain\
│       └─User.java
└─WebContent\
  ├─index.jsp
  ├─META-INF\
  │ └─MANIFEST.MF
  └─WEB-INF\
    ├─content\
    │ ├─radiobuttonForm.jsp
    │ ├─radiobuttonsForm.jsp
    │ └─radiobuttonsForm2.jsp
    ├─lib\
    │ ├─commons-logging-1.2.jar
    │ ├─spring-aop-5.0.1.RELEASE.jar
    │ ├─spring-aspects-5.0.1.RELEASE.jar
    │ ├─spring-beans-5.0.1.RELEASE.jar
    │ ├─spring-context-5.0.1.RELEASE.jar
    │ ├─spring-context-indexer-5.0.1.RELEASE.jar
    │ ├─spring-context-support-5.0.1.RELEASE.jar
    │ ├─spring-core-5.0.1.RELEASE.jar
    │ ├─spring-expression-5.0.1.RELEASE.jar
    │ ├─spring-instrument-5.0.1.RELEASE.jar
    │ ├─spring-jcl-5.0.1.RELEASE.jar
    │ ├─spring-jdbc-5.0.1.RELEASE.jar
    │ ├─spring-jms-5.0.1.RELEASE.jar
    │ ├─spring-messaging-5.0.1.RELEASE.jar
    │ ├─spring-orm-5.0.1.RELEASE.jar
    │ ├─spring-oxm-5.0.1.RELEASE.jar
    │ ├─spring-test-5.0.1.RELEASE.jar
    │ ├─spring-tx-5.0.1.RELEASE.jar
    │ ├─spring-web-5.0.1.RELEASE.jar
    │ ├─spring-webflux-5.0.1.RELEASE.jar
    │ ├─spring-webmvc-5.0.1.RELEASE.jar
    │ └─spring-websocket-5.0.1.RELEASE.jar
    ├─springmvc-config.xml
    └─web.xml

User.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 域对象，实现序列化接口
public class User
    implements Serializable
{
    private static final long serialVersionUID = 1L;
    // 定义一个属性,用来绑定表单中的数据
    private String sex;
    // getter,setter方法
    public String getSex()
    {
        return sex;
    }
    public void setSex(String sex)
    {
        this.sex = sex;
    }
}

User类中定义了一个属性sex， 用来绑定页面的radiobutton标签数据。

UserController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
package org.fkit.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.fkit.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController
{

    @GetMapping(
        value = "/radiobuttonForm")
    public String registerForm(Model model)
    {
        // 创建领域对象
        User user = new User();
        // value值相等的单选按钮将会被选中
        user.setSex("女");
        // 添加领域对象到模型(也就去请求域中)
        model.addAttribute("user", user);
        // 返回视图
        return "radiobuttonForm";
    }

    @GetMapping(
        value = "/radiobuttonsForm")
    public String registerForm2(Model model)
    {
        User user = new User();
        // value值相等的会被选中中
        user.setSex("男");
        // 页面展现的可供选择的单选框内容sexList
        List<String> sexList = new ArrayList<String>();
        // 数据源中的值将会填写到单选按钮的value属性值
        sexList.add("男");
        sexList.add("女");
        sexList.add("不男不女");
        sexList.add("半男半女");
        model.addAttribute("user", user);
        model.addAttribute("sexList", sexList);
        return "radiobuttonsForm";
    }
    @GetMapping(
        value = "/radiobuttonsForm2")
    public String registerForm3(Model model)
    {
        User user = new User();
        // 设置sex变量的值为"1"，页面的radio单选框的value=男会被选中
        user.setSex("1");
        // 页面展现的可供选择的单选框内容sexMap
        Map<String, String> sexMap = new HashMap<String, String>();
        sexMap.put("1", "男");
        sexMap.put("2", "女");
        sexMap.put("3", "不男不女");
        sexMap.put("4", "半男半女");
        model.addAttribute("user", user);
        model.addAttribute("sexMap", sexMap);
        return "radiobuttonsForm2";
    }

}

radiobuttonForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试radiobutton标签</title>
</head>
<body>
    <h3>form:radiobutton测试</h3>
<%-- modelAttribute="user"表示绑定到域中的user属性  --%>
<form:form modelAttribute="user" method="post"
    action="radiobuttonForm">
    <table>
        <tr>
            <td>性别:</td>
            <%-- path指定user属性中的成员变量名称  --%>
            <%-- value属性的值 等于 user对象的sex属性的值 的时候选中  --%>
            <td><form:radiobutton path="sex" value="男" />男&nbsp;
                <form:radiobutton path="sex" value="女" />女&nbsp;
                <form:radiobutton path="sex" value="不男不女" />不男不女(自己写的文本)&nbsp;
                <form:radiobutton path="sex" value="半男半女" />不男不女(自己写的文本)&nbsp;</td>
        </tr>
    </table>
</form:form>
</body>
</html>

web.xml文件和springmvc-config.xml文件与之前讲述的一致， 此处不再赘述。

测试

部署RadiobuttonTest这个Web应用， 在浏览器中输入如下URL来测试应用：

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- modelAttribute="user"表示绑定到域中的user属性 -->
<form id="user" action="radiobuttonForm" method="post">
    <table>
        <tr>
            <td>性别:</td>
            <!--path指定user属性中的成员变量名称 -->
            <!--value属性的值于user对象的sex属性的值相等的时候选中 -->
            <td>
                <input id="sex1" name="sex" type="radio" value="男" />男&nbsp;
                <input id="sex2" name="sex" type="radio" value="女" checked="checked" />女&nbsp;
                <input id="sex3" name="sex" type="radio" value="不男不女" />不男不女(自己写的文本)&nbsp;
                <input id="sex4" name="sex" type="radio" value="半男半女" />不男不女(自己写的文本)&nbsp;</td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片
使用这种方式按钮的提示文本要自己

4.1.9radiobuttons标签

Spring MVC的radiobuttons标签会渲染多个类型为radio的普通HTML input标签。

属性

radiobuttons标签可使用如表 4.10 所示的属性。 表 4.10 中列出的只是Spring MVC的radiobuttons标签的常用属性， 并没有包含HTML的相关属性。

属性 描述
cssClass 定义要应用到被渲染的radio元素的CSS类
cssTyle 定义要应用到被渲染的radio元素的CSS样式
cssErrorClass 定义要应用到被渲染的radio元素的CSS类,如果bound属性中包含错误,则覆盖cssClass属性值
htmlEscape boolean值,表示被渲染的值是否应该进行HTML转义
path 要绑定的属性路径
items 用于生成radio元素的对象的Collection、Map或者Amay
itemLabel item属性中定义的Collection、Map或者Aay中的对象属性,为每个radio元素提供label
itemValue item属性中定义的Collection、Map或者Amay中的对象属性,为每个radio元素提供值
delimiter 定义两个Input元素之间的分隔符,默认没有分隔符

相对于一个radiobutton标签只能生成一个对应的单选框， 一个radiobuttons标签将根据其绑定的数据生成多个单选框。
radiobuttons绑定的数据可以是数组、 集合和Map。

items指定选项列表 path指定选中哪个选项

在使用radiobuttons时有两个属性是必须指定的， 一个是path， 另一个是items。

  • items表示当前要用来显示的项有哪些，
  • path所绑定的表单对象的属性表示当前表单对象拥有的项， 即在items所显示的所有项中表单对象拥有的项会被设定为选中状态。

    示例：radiobuttons标签的使用

使用数组或集合作为数据源

请求处理方法 registerForm2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@GetMapping(value = "/radiobuttonsForm")
public String registerForm2(Model model)
{
    User user = new User();
    // value值相等的会被选中中
    user.setSex("男");
    // 页面展现的可供选择的单选框内容sexList
    List<String> sexList = new ArrayList<String>();
    //数据源中的值将会填写到单选按钮的value属性值
    sexList.add("男");
    sexList.add("女");
    sexList.add("不男不女");
    sexList.add("半男半女");
    model.addAttribute("user", user);
    model.addAttribute("sexList", sexList);
    return "radiobuttonsForm";
}

radiobuttonsForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试radiobuttons标签</title>
</head>
<body>
    <h3>form:radiobuttons测试</h3>
    <!--     绑定模型中的user属性对应的对象 -->
    <form:form modelAttribute="user" method="post"
        action="radiobuttonsForm">
        <table>
            <tr>
                <td>性别:</td>
                <!-- items绑定数据源,数据源可以是数组,集合,Map, -->
                <!-- 数据源中的数据将会被渲染成一个个选项 -->
                <!-- path绑定模型中user属性对应的对象的sex成员变量, -->
                <!-- 该成员变量的值如果在数据源中找到,将会勾选值相等的选项 -->
                <td><form:radiobuttons path="sex" items="${sexList }" /></td>
            </tr>
        </table>
    </form:form>
</body>
</html>

测试

在浏览器中输入如下URL来测试应用：

http://localhost:8080/RadiobuttonTest/radiobuttonsForm

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id="user" action="radiobuttonsForm" method="post">
    <table>
        <tr>
            <td>性别:</td>
            <td>
                <span>
                    <input id="sex1" name="sex" type="radio" value="男" checked="checked" />
                    <label for="sex1">男</label>
                </span>
                <span>
                    <input id="sex2" name="sex" type="radio" value="女" />
                    <label for="sex2">女</label>
                </span>
                <span>
                    <input id="sex3" name="sex" type="radio" value="不男不女" />
                    <label for="sex3">不男不女</label>
                </span>
                <span>
                    <input id="sex4" name="sex" type="radio" value="半男半女" />
                    <label for="sex4">半男半女</label>
                </span>
            </td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片
、这里与radiobutton的区别在于， 之前的页面有两个radiobutton标签， 而现在页面只有一个radiobuttons标签， 单选框的value和label来自于后台的List集合。
我们介绍的这种情况是使用List集合作为显示单选框项的数据源， 可以看到， 它所呈现出来的标签label和它的值是一样的。 使用Array和Set作为数据源也是这样。

<span>
    <input id="sex1" name="sex" type="radio" value="男" checked="checked" />
    <label for="sex1">男</label>
</span>

使用Map作为数据源

那么要让radiobuttons呈现出来的label和value不同应该怎么做呢？ 这时我们可以使用Map作为数据源。 当使用Map作为radiobuttons的items属性的数据源时，

  • Map集合的key将作为真正的单选框的value，
  • Map集合的value将作为label进行显示。

当使用Map作为radiobuttons的items属性的数据源时我们绑定的表单对象属性的类型可以是Array、 集合和Map， 这种情况就是判断items属性指定的Map中是否含有对应的key来决定当前的单选框是否处于选中状态。

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@GetMapping(value = "/radiobuttonsForm2")
public String registerForm3(Model model)
{
    User user = new User();
    // 设置sex变量的值为"1"，页面的radio单选框的value=男会被选中
    user.setSex("1");
    // 页面展现的可供选择的单选框内容sexMap
    Map<String, String> sexMap = new HashMap<String, String>();
    sexMap.put("1", "男");
    sexMap.put("2", "女");
    sexMap.put("3", "不男不女");
    sexMap.put("4", "半男半女");
    model.addAttribute("user", user);
    model.addAttribute("sexMap", sexMap);
    return "radiobuttonsForm2";
}

在registerForm3方法中， 提供给页面显示的可被选择的单选框内容sexMap是一个Map， 而user对象的sex变量中保存的正是sexMap中的key， 其用来决定页面的单选框是否处于选中状态。

radiobuttonsForm2.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试radiobuttons标签</title>
</head>
<body>
    <h3>form:radiobuttons测试</h3>
    <form:form modelAttribute="user" method="post"
        action="radiobuttonForm2">
        <table>
            <tr>
                <td>性别:</td>
                <td><form:radiobuttons path="sex" items="${sexMap }" /></td>
            </tr>
        </table>
    </form:form>
</body>
</html>

测试

在浏览器中输入如下URL来测试应用：

http://localhost:8080/RadiobuttonTest/radiobuttonsForm2

请求的结果和图 4.5 所示的一致， 查看源代码， 发现radiobuttons的value和label不同了，value的值正是Map的key， 而label的值正是Map的value。

渲染结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id="user" action="radiobuttonForm2" method="post">
    <table>
        <tr>
            <td>性别:</td>
            <td>
                <span>
                    <input id="sex1" name="sex" type="radio" value="1" checked="checked" />
                    <label for="sex1">男</label>
                </span>
                <span>
                    <input id="sex2" name="sex" type="radio" value="2" />
                    <label for="sex2">女</label>
                </span>
                <span>
                    <input id="sex3" name="sex" type="radio" value="3" />
                    <label for="sex3">不男不女</label>
                </span>
                <span>
                    <input id="sex4" name="sex" type="radio" value="4" />
                    <label for="sex4">半男半女</label>
                </span>
            </td>
        </tr>
    </table>
</form>

使用这种方式同样不需要再jsp中自己写上单选按钮的提示文本,Spring MVC会生成label标签作为提示文本,lable标签中的内容对应数据源map中的值,map中的key作为单选按钮value属性的值:

<span>
    <input id="sex1" name="sex" type="radio" value="1" checked="checked" />
    <label for="sex1">男</label>
</span>

显示效果

这里有一张图片

itemLabel和itemValue属性

当使用Array或者集合作为数据源， 且里面的元素都是一个domain对象时， 我们还可以使用radiobuttons标签的itemLabel和itemValue属性来表示， 使用数组或者集合中元素对象的哪一个属性作为需要呈现的单选框的label和value。 用法和之前checkboxes类似， 此处不再赘述。