Thymeleaf 下拉列表传值示例

news2024/11/15 21:22:00

参考资料

  1. Spring Boot で Thymeleaf 使い方メモ

目录

  • 一. 前期准备
  • 二. 实体类.内部类设置下拉列表值
    • 2.1 form实体类
    • 2.2 Controller层
    • 2.3 Thymeleaf页面
  • 三. request.setAttribute()设置下拉列表值
    • 3.1 定义下拉列表存放类
    • 3.2 Controller层
    • 3.3 Thymeleaf页面

一. 前期准备

  • 枚举类
public enum CsvMasterEnum {

    受注ファイル("1", "受注ファイル"),
    受注先マスタ("2", "受注先マスタ");
    
    private String code;
    
    private String name;

    CsvMasterEnum(String code, String name) {
        this.code = code;
        this.name = name;
    }

    public String getCode() {
        return code;
    }
    
    public String getName() {
        return name;
    }
}

二. 实体类.内部类设置下拉列表值

2.1 form实体类

  • 若获取下拉列表List的业务不复杂，可直接定义一个内部类，在内部类中直接完成数据获取等相关操作
import lombok.Data;

import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Data
public class Test17Form {

    private String name;

    private Integer hobby;

    private String birthday;

    // ⏹⏹⏹下拉列表数据类
    private PullDownData pullDownData;
	
	// ⏹⏹⏹内部类
    public static class PullDownData {

        // 字符串List
        public List<String> getPersonNameList() {
            return Arrays.asList("贾飞天", "枫叶红");
        }

        // 枚举类,Thymeleaf中可以直接遍历枚举类
        public CsvMasterEnum[] getMasterList() {
            return CsvMasterEnum.values();
        }

        // Map
        public Map<Integer, String> obtainAddressMap() {

            return new HashMap<Integer, String>(){
                {
                    put(100, "广东省");
                    put(200, "山西省");
                }
            };
        }
        
    }
}

2.2 Controller层

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/test17")
public class Test17Controller {

    @GetMapping("/init")
    public ModelAndView init() {

        Test17Form test17Form = new Test17Form();

        // 通过内部类定义一个实体类对象
        Test17Form.PullDownData pullDownData = new Test17Form.PullDownData();
        test17Form.setPullDownData(pullDownData);

        // 指定跳转的页面
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("test17");
        modelAndView.addObject("entity", test17Form);
        
        return modelAndView;
    }
}

2.3 Thymeleaf页面

  • Thymeleaf可以直接调用实体类中的方法
  • Thymeleaf可以直接遍历Map和枚举类
  • 若方法名以get开头,可以省略get将余下的部分当做属性来调用
<body>
<div th:object="${entity}">
    <select>
    	<!--
    		getPullDownData()这种方法相当于直接调用entity中的方法
    	-->
        <th:block th:each="option,state : *{getPullDownData().getPersonNameList()}">
            <option th:value="${state.index}">
                [[${option}]]
            </option>
        </th:block>
    </select>
    <hr>

    <select>
        <!-- 若方法名以get开头,可以省略get和调用方法的() -->
        <th:block th:each="option: *{pullDownData.masterList}">
            <option th:value="${option.code}">
                [[${option.name}]]
            </option>
        </th:block>
    </select>
    <hr>

    <select>
        <!-- 若方法名不以get开头,则必须用 完成的方法名() 这种形式来调用 -->
        <th:block th:each="option: *{pullDownData.obtainAddressMap()}">
        	<!--
        		遍历map，获取其中的key和value
			-->
            <option th:value="${option.key}">
                [[${option.value}]]
            </option>
        </th:block>
    </select>
</div>
<script th:inline="javascript">

	// 获取下拉列表中的数据，可以看到只有方法名带get的数据被获取了出来
    const pullDownData = [[${entity}]].pullDownData;
    console.log(pullDownData);
    /*
    	{
		  "personNameList": [
		    "贾飞天",
		    "枫叶红"
		  ],
		  "masterList": [
		    "受注ファイル",
		    "受注先マスタ"
		  ]
	   }
  */
</script>
</body>

在这里插入图片描述

三. request.setAttribute()设置下拉列表值

3.1 定义下拉列表存放类

import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class PullDownData {

    // 字符串List
    public List<String> getPersonNameList() {
        return Arrays.asList("张三", "李四");
    }

    // 枚举类
    public CsvMasterEnum[] getMasterList() {
        return CsvMasterEnum.values();
    }

    // Map
    public Map<Integer, String> getAddressMap() {

        return new HashMap<Integer, String>(){
            {
                put(100, "河南省");
                put(200, "河北省");
            }
        };
    }
}

form实体类

import lombok.Data;

@Data
public class Test18Form {

    private String name;

    private Integer hobby;

    private String birthday;
}

3.2 Controller层

  • 通过将下拉列表的值放入request的attribute属性中可以实现form实体类中只存放和页面项目相关的属性，避免了多余下拉列表属性的添加。
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

@Controller
@RequestMapping("/test18")
public class Test18Controller {

    @Resource
    private HttpServletRequest request;

    @GetMapping("/init")
    public ModelAndView init() {

        // 指定跳转的页面
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("test18");

        Test18Form test18Form = new Test18Form();
        modelAndView.addObject("entity", test18Form);
		
		// 将下拉列表放入request的Attribute中
        request.setAttribute("pullDownData", new PullDownData());
        return modelAndView;
    }
}

3.3 Thymeleaf页面

<body>
<div th:object="${entity}">
    <select>
        <!-- pullDownData并非来源于后台的entity实体类,而是来自于request.setAttribute() -->
        <th:block th:each="option,state : ${pullDownData.getPersonNameList()}">
            <option th:value="${state.index}">
                [[${option}]]
            </option>
        </th:block>
    </select>
    <hr>

    <select>
        <th:block th:each="option: ${pullDownData.masterList}">
            <option th:value="${option.code}">
                [[${option.name}]]
            </option>
        </th:block>
    </select>
    <hr>

    <select>
        <th:block th:each="option: ${pullDownData.getAddressMap()}">
            <option th:value="${option.key}">
                [[${option.value}]]
            </option>
        </th:block>
    </select>
</div>
<script th:inline="javascript">
    // 获取request的Attribute属性所对应的值
    const pullDownData = [[${#request.getAttribute('pullDownData')}]];
    console.log(pullDownData);
    /*
    	{
		  "masterList": [
		    "受注ファイル",
		    "受注先マスタ"
		  ],
		  "addressMap": {
		    "100": "河南省",
		    "200": "河北省"
		  },
		  "personNameList": [
		    "张三",
		    "李四"
		  ]
	   }
    */
</script>
</body>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/108206.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FT2232作为JTAG烧录器的使用步骤详解

FT2232作为JTAG烧录器的使用步骤详解

FT2232作为JTAG烧录器的使用步骤详解FT2232作为JTAG烧录器的使用步骤详解配置OpenOCD环境(已经配置好的可以跳过)【步骤 1】安装 FT2232HL 芯片的驱动&#xff0c;安装文件为 CDM21228_Setup.exe。【步骤 2】 安装 FT_Prog_v3.6.88.402 Installer.exe【步骤 3】 使用 FT Prog 软…
阅读更多...
模型实战一之YOLOv7实例分割、模型寻来自己数据集

模型实战一之YOLOv7实例分割、模型寻来自己数据集

模型实战一之YOLOv7实例分割、模型训练自己数据集 1.环境准备 下载yolov7实例分割模型&#xff1a; git clone https://github.com/WongKinYiu/yolov7.git -b mask yolov7-maskcd yolov7-mask安装环境 #查看已安装环境 conda info --envs #查看安装了哪些包 conda list#创建…
阅读更多...
神奇的线性表(链表)

神奇的线性表(链表)

目录 神马是链表 链表的分类 单向链表 链表的常用操作 查找操作 插入操作 删除操作 链表与数组 数组的插入 数组的删除 链表的应用 尾声 神马是链表 记得很久很久以前…我们学习过数组&#xff0c; 数组是在内存中一段连续的存储空间&#xff0c; 可以在常数时间内访…
阅读更多...
逻辑分析仪解析SPI数据

逻辑分析仪解析SPI数据

工具为梦源逻辑分析仪&#xff0c;本次测试的是ST7789v屏幕驱动 接线方面一共需要三根线&#xff08;MOSI&#xff0c;SCL&#xff0c;GND&#xff09; SCL PA5 MOSI PA7 DSView上位机配置 通道按照接线选择&#xff0c;这个一定要对应上 COPL CPOH按照SPI实际配置来&#x…
阅读更多...
生成模型(四)：扩散模型（Diffusion Models）

生成模型(四)：扩散模型（Diffusion Models）

本文大纲如下&#xff1a; 生成模型种类 到目前为止&#xff0c;我已经写了三种类型的生成模型&#xff0c;[[生成模型-GAN]]、[[生成模型-VAE]]和[[生成模型-Flow based model]]。 它们在生成高质量样本方面显示出巨大的成功&#xff0c;但每一种都有其自身的一些局限性。下…
阅读更多...
基于Python的GUI图形用户界面编程

基于Python的GUI图形用户界面编程

【无限嚣张&#xff08;菜菜&#xff09;】&#xff1a;hello您好&#xff0c;我是菜菜&#xff0c;很高兴您能来访我的博客&#xff0c;我是一名爱好编程学习研究的菜菜&#xff0c;每天分享自己的学习&#xff0c;想法&#xff0c;博客来源与自己的学习项目以及编程中遇到问题…
阅读更多...
非零基础自学Golang 第17章 HTTP编程(上) 17.2 HTTP客户端 17.2.4 发起POST请求

非零基础自学Golang 第17章 HTTP编程(上) 17.2 HTTP客户端 17.2.4 发起POST请求

非零基础自学Golang 文章目录非零基础自学Golang第17章 HTTP编程(上)17.2 HTTP客户端17.2.4 发起POST请求第17章 HTTP编程(上) 17.2 HTTP客户端 17.2.4 发起POST请求 在上一小节我们使用了http.NewRequest来创建一个请求&#xff0c;http.NewRequest有三个参数&#xff0c;第…
阅读更多...
web前端-javascript-String字符串的相关方法

web前端-javascript-String字符串的相关方法

文章目录字符串的相关方法1. 底层字符串保存2. 方法1) length 属性 获取长度2) charAt() 获取指定字符3) chartCodeAt() 获取指定字符编码4) String.formCharCode() 根据编码获取字符5) concat() 连接字符串6) indexOf() 是否含有指定内容7) lastIndexOf() 是否含有指定内容8) …
阅读更多...
哈斯机床联网

哈斯机床联网

一、设备信息确认 1、确认型号 哈斯的数控面板共有两种情况。 老版本&#xff1a; 新版本&#xff1a; 注&#xff1a;老版本通讯为串口&#xff0c;新版本通讯为网口。 2、确认通讯接口 1、数控面板的后面 老版本的串口一般都会引出在正后面的左侧位置&#xff0c;上面有…
阅读更多...
结构型模式之代理模式（八）

结构型模式之代理模式（八）

常说的设计模式是23种设计模式&#xff0c;分为3大类&#xff1a; 创建型模式5种&#xff1a;工厂方法、抽象工厂、单例、建造者、原型结构型模式7种&#xff1a;适配器、代理、桥接、装饰者、外观、享元、组合行为型模式11种&#xff1a;模板方法、解释器、策略、观察者、迭代…
阅读更多...
非零基础自学Golang 第15章 Go命令行工具 15.5 代码测试(test) 15.5.1 单元测试

非零基础自学Golang 第15章 Go命令行工具 15.5 代码测试(test) 15.5.1 单元测试

非零基础自学Golang 文章目录非零基础自学Golang第15章 Go命令行工具15.5 代码测试(test)15.5.1 单元测试第15章 Go命令行工具 15.5 代码测试(test) go test命令用于对Go语言编写的代码包进行测试。 可以指定要测试的文件&#xff0c;也可以直接对整个包进行测试&#xff0c…
阅读更多...
[Java实战]Squaretest单元测试生成利器...一天生成所有简单单元测试...[新手开箱可用]

[Java实战]Squaretest单元测试生成利器...一天生成所有简单单元测试...[新手开箱可用]

Squaretest单元测试生成利器...一天生成所有简单单元测试...[新手开箱可用]1.Squaretest是什么?2.如何配合JUnit使用...?3.生成的java文件长啥样?4.如何生成和使用?5.如何用生成的XXXTest.java文件进行单元测试...6.观察结果7.单元测试成功8.源码地址为了好好写单元测试,提…
阅读更多...
Dell inspiron 7580硬件升级_更换电池加内存条移动硬盘

Dell inspiron 7580硬件升级_更换电池加内存条移动硬盘

文章目录前言硬件升级确认硬件型号参数拆机验证硬件更新后记前言 手上的笔记本[Dell inspiron 7580]用了几年了&#xff0c;还是刚上大学的时候买的&#xff0c;现在感觉这个配置用起来有点吃力了&#xff0c;稍微更新一下配置准备再战两年┭┮﹏┭┮ Light em up, light em u…
阅读更多...
参数扫描文件的用法

参数扫描文件的用法

摘要 通过控制和改变所选参数有助于检查给定光学系统的性能。 VirtualLab Fusion提供了完全灵活且计算效率高&#xff08;通过并行化&#xff09;的参数运行&#xff0c;使用户可以指定不同的参数变化方式。 作为示例&#xff0c;它可以用于所研究的任何系统参数的公差分析。 分…
阅读更多...
Moonbeam生态说｜Moonbeam Ignite重燃DeFi生态活力

Moonbeam生态说｜Moonbeam Ignite重燃DeFi生态活力

日前&#xff0c;Moonbeam Network生态中两家活跃度最高的DeFi协议Moonwell和StellaSwap受邀参加Moonbeam中文社区BinanceLive直播。 作为Moonbeam生态的老朋友&#xff0c;两家项目方的联合创始人对赋能生态胸有成竹。 今年11月&#xff0c;Moonwell和StellaSwap都得到社区投票…
阅读更多...
MORE CONVNETS IN THE 2020S: SCALING UP KER- NELS BEYOND 51 × 51 USING SPARSITY

MORE CONVNETS IN THE 2020S: SCALING UP KER- NELS BEYOND 51 × 51 USING SPARSITY

论文链接: https://arxiv.org/pdf/2207.03620.pdf code: https://github.com/VITA-Group/SLaKlink MORE CONVNETS IN THE 2020S: SCALING UP KER- NELS BEYOND 51 51 USING SPARSITY一、引言&#xff08;二&#xff09;、大内核注意力&#xff08;二&#xff09;、卷积中的大…
阅读更多...
I/O多路转接 —— select、poll、epoll

I/O多路转接 —— select、poll、epoll

目录 一、概述 二、I/O多路转接 —— select 1. select函数的基本介绍 2. select的基本工作流程 3. 文件描述符的就绪条件 4. 基于select函数设计的服务器 1. 基本套接字的编写 2. select服务器的编写 5. select的优缺点 三、I/O多路转接 —— poll 1. poll函数的基…
阅读更多...
LeetCode-1799- N 次操作后的最大分数和

LeetCode-1799- N 次操作后的最大分数和

1、状态压缩动态规划 我们可以使用动态规划来解决问题&#xff0c;我们利用数组dp[s]dp[s]dp[s]来表示状态为s时&#xff0c;能够去到的最大分数。由于题目限定了n的范围&#xff0c;因此我们可以利用二进制数字s来压缩状态&#xff0c;我们利用长度为m的二进制数s的每一位来表…
阅读更多...
Javascript | Popper | 如何下载popper.min.js 与 各类js资源

Javascript | Popper | 如何下载popper.min.js 与 各类js资源

文章目录问题描述解决办法问题描述 作为一个JS生手只知道使用CDN在线引用或者使用下载好的本地JS文件。 比如popper.js官网显示如下图&#xff0c;没有任何的Download按钮&#xff0c;有部分其他类的JS官网也存在同样的情况。 虽然有提供CDN&#xff0c;但因为国内网络原因&am…
阅读更多...
Lua table(表)

Lua table(表)

table 是 Lua 的一种数据结构用来帮助我们创建不同的数据类型&#xff0c;如&#xff1a;数组、字典等。 Lua table 使用关联型数组&#xff0c;你可以用任意类型的值来作数组的索引&#xff0c;但这个值不能是 nil。 Lua table 是不固定大小的&#xff0c;你可以根据自己需要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023