SpringBoot使用Thymeleaf動態綁定下拉框、單選鈕、複選框

項目中如果使用Thymeleaf模板引擎，需要經常的對下拉框、單選鈕、複選框進行數據的動態綁定。下面將介紹如何使用Thymeleaf動態綁定下拉框、單選鈕、複選框的數據。

1、使用Thymeleaf動態綁定

1.1 Select標籤的動態綁定（下拉框）

<select name="departmentCode" class="b_select" >
    <option value="">請選擇</option>
    <option th:each="item:${departmentInfoList}"
            th:value="${item.departmentCode}" th:text="${item.departmentName}"
            th:attr="selected=${userInfo.departmentCode==item.departmentCode?true:false}">
    </option>
</select>

1.2 Radio標籤的動態綁定（單選鈕）

<input id="male" name="sex" type="radio" value="1" th:attr="checked=${userInfo.sex==1?true:false}"/>
<label for="male">男</label>
<input id="female" name="sex" type="radio" value="2" th:attr="checked=${userInfo.sex==2?true:false}"/>
<label for="female">女</label>
<input id="secrecy" name="sex" type="radio" value="3" th:attr="checked=${userInfo.sex==3?true:false}"/>
<label for="secrecy">保密</label>

1.3 Checkbox標籤的動態綁定（複選框）

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

 

2、綜合實例

【實例】獲取用戶信息，使用Thymeleaf綁定用戶信息。

實例要求：

1、下拉框中動態綁定部門列表，並選中用戶的部門。

2、單選鈕動態綁定用戶的性別。

3、複選框動態綁定角色列表，並選中用戶擁有的角色。

4、獲取並綁定用戶信息。

執行結果：

（1）引入Thymeleaf依賴

首先創建SpringBoot項目，然後需要引入Thymeleaf依賴。直接在pom.xml文件中加入以下依賴即可。

<!-- 引入Thymeleaf模板引擎 -->
<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:attr="checked=${userInfo.sex==1?true:false}"/>
                <label for="male">男</label>
                <input id="female" name="sex" type="radio" value="2" th:attr="checked=${userInfo.sex==2?true:false}"/>
                <label for="female">女</label>
                <input id="secrecy" name="sex" type="radio" value="3" th:attr="checked=${userInfo.sex==3?true:false}"/>
                <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:attr="selected=${userInfo.departmentCode==item.value?true:false}">
                    </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:attr="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>