SpringBoot使用Thymeleaf动态绑定下拉框、单选钮、复选框

妖狐艹你老母 2021-08-30 01:08 1332阅读 0赞

项目中如果使用Thymeleaf模板引擎，需要经常的对下拉框、单选钮、复选框进行数据的动态绑定。下面将介绍如何使用Thymeleaf动态绑定下拉框、单选钮、复选框的数据。

# 1、使用Thymeleaf动态绑定 #

## 1.1 Select标签的动态绑定（下拉框） ##

## 1.2 Radio标签的动态绑定（单选钮） ##

## 1.3 Checkbox标签的动态绑定（复选框） ##

<th:block th:each="item:${roleList}">
        <input th:id="'role_' + ${item.id}" name="roleArray" type="checkbox"
               th:value="${item.value}" th:checked="${item.isChecked}">
        <label th:for="'role_' + ${item.id}" th:text="${item.text}"></label>
    </th:block>

# 2、综合实例 #

**【实例】**获取用户信息，使用Thymeleaf绑定用户信息。

**实例要求：**

1、下拉框中动态绑定部门列表，并选中用户的部门。

2、单选钮动态绑定用户的性别。

3、复选框动态绑定角色列表，并选中用户拥有的角色。

4、获取并绑定用户信息。

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

**（1）引入Thymeleaf依赖**

首先创建SpringBoot项目，然后需要引入Thymeleaf依赖。直接在pom.xml文件中加入以下依赖即可。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

**（2）配置视图解析器**

在application.yml配置文件中，可以配置Thymeleaf模板解析器属性，如以下代码：

spring:
      thymeleaf:
        mode: HTML5
        encoding: UTF-8
        cache: false  #使用Thymeleaf模板引擎，关闭缓存
        servlet:
          content-type: text/html

**（3）Entity实体层**

创建entity目录（实体层），并创建 UserInfo.class 用户信息实体类。

package com.pjb.entity;
    
    /**
     * 用户信息实体类
     * @author pan_junbiao
     **/
    public class UserInfo
    {
        //用户姓名
        private String userName;
    
        //博客地址
        private String blogUrl;
    
        //性别（1：男；2：女；3：保密）
        private int sex;
    
        //部门编号
        private String departmentCode;
    
        //角色数组
        private String[] roleArray;
    
        //博客信息
        private String blogRemark;
    
        //省略getter与setter方法...
    }

**（4）Model模型层**

创建model目录（模型层），并创建 OptionModel.class 选项模型类。

package com.pjb.model;
    
    /**
     * 选项模型类
     * @author pan_junbiao
     **/
    public class OptionModel
    {
        public Object id; //编号
        public String text; //文本
        public Object value; //值
        public boolean isChecked; //是否选中
    
        public OptionModel(int id,String text,Object value)
        {
            this.id = id;
            this.text = text;
            this.value = value;
        }
    
        public OptionModel(int id,String text,Object value, boolean isChecked)
        {
            this.id = id;
            this.text = text;
            this.value = value;
            this.isChecked = isChecked;
        }
    
        //省略getter与setter方法...
    }

**（5）Controller控制器层**

创建controller目录（控制器层），并创建 UserController.class 用户控制器类。

package com.pjb.controller;
    
    import com.pjb.entity.UserInfo;
    import com.pjb.model.OptionModel;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 用户控制器
     * @author pan_junbiao
     **/
    @Controller
    @RequestMapping("user")
    public class UserController
    {
        /**
         * 获取用户信息
         */
        @RequestMapping("/getUserInfo")
        public ModelAndView getUserInfo()
        {
            //获取部门列表
            List<OptionModel> departmentList = new ArrayList<OptionModel>();
            departmentList.add(new OptionModel(1, "研发部", "1001"));
            departmentList.add(new OptionModel(2, "人事部", "1002"));
            departmentList.add(new OptionModel(3, "财务部", "1003"));
    
            //获取角色列表
            List<OptionModel> roleList = new ArrayList<OptionModel>();
            roleList.add(new OptionModel(1, "系统管理员", "2001"));
            roleList.add(new OptionModel(2, "人事管理员", "2002"));
            roleList.add(new OptionModel(3, "财务管理员", "2003"));
    
            //用户信息
            UserInfo userInfo = new UserInfo();
            userInfo.setUserName("pan_junbiao的博客");
            userInfo.setBlogUrl("https://blog.csdn.net/pan_junbiao");
            userInfo.setSex(1);
            userInfo.setDepartmentCode("1001");
            String[] roleArray = new String[]{"2001","2003"};
            userInfo.setRoleArray(roleArray);
            userInfo.setBlogRemark("您好，欢迎访问 pan_junbiao的博客");
    
            //关联角色选项
            for(String roleItem : userInfo.getRoleArray())
            {
                for(OptionModel optionItem : roleList)
                {
                    if(optionItem.getValue().equals(roleItem))
                    {
                        optionItem.setChecked(true);
                        break;
                    }
                }
            }
    
            //返回结果
            ModelAndView modelAndView = new ModelAndView();
            modelAndView.addObject("departmentList",departmentList);
            modelAndView.addObject("roleList",roleList);
            modelAndView.addObject("userInfo",userInfo);
            modelAndView.setViewName("user_info.html");
            return modelAndView;
        }
    }

**（6）View表现层**

在resources/templates目录下，创建 user\_info.html 用户信息显示页面。

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>用户信息</title>
        <meta name="author" content="pan_junbiao的博客">
        <style>
            table{
                border-top: 1px solid #000000;
                border-left: 1px solid #000000;
                border-collapse: collapse; /*设置单元格的边框合并为1*/
            }
            th{
                text-align: right;
            }
            th, td{
                border-bottom: 1px solid #000000;
                border-right: 1px solid #000000;
                padding: 5px 10px;
            }
            select{
                width: 100px;
                padding: 3px;
            }
        </style>
    </head>
    <body>
    <form action="" method="post" name="myForm">
        <table align="center">
            <caption>用户信息</caption>
            <tr>
                <th>用户姓名：</th>
                <td th:text="${userInfo.userName}"></td>
            </tr>
            <tr>
                <th>博客地址：</th>
                <td th:text="${userInfo.blogUrl}"></td>
            </tr>
            <tr>
                <th>性别：</th>
                <td>
                    <input id="male" name="sex" type="radio" value="1" th:checked="${userInfo.sex==1}"/>
                    <label for="male">男</label>
                    <input id="female" name="sex" type="radio" value="2" th:checked="${userInfo.sex==2}"/>
                    <label for="female">女</label>
                    <input id="secrecy" name="sex" type="radio" value="3" th:checked="${userInfo.sex==3}"/>
                    <label for="secrecy">保密</label>
                </td>
            </tr>
            <tr>
                <th>部门：</th>
                <td>
                    <select name="departmentCode" class="b_select" >
                        <option value="">请选择</option>
                        <option th:each="item:${departmentList}"
                                th:value="${item.value}" th:text="${item.text}"
                                th:selected="${userInfo.departmentCode==item.value}">
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>角色：</th>
                <td>
                    <th:block th:each="item:${roleList}">
                        <input th:id="'role_' + ${item.id}" name="roleArray" type="checkbox"
                               th:value="${item.value}" th:checked="${item.isChecked}">
                        <label th:for="'role_' + ${item.id}" th:text="${item.text}"></label>
                    </th:block>
                </td>
            </tr>
            <tr>
                <th>博客信息：</th>
                <td th:text="${userInfo.blogRemark}"></td>
            </tr>
            
            <tr>
                <td colspan="2" style="text-align: center; padding: 5px;">
                    <input class="b_button" type="submit" value="提交" />
                    <input class="b_button" type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </form>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/9424d621989441e88c1bc1b34226d84a.png