SpringBoot使用thymeleaf實(shí)現(xiàn)前端表格
1. User實(shí)體類
注:這里使用了 Lombok 技術(shù),通過(guò) @Data
注釋自動(dòng)創(chuàng)建 get,set 方法;通過(guò) @NoArgsConstructor
注釋自動(dòng)創(chuàng)建無(wú)參數(shù)的構(gòu)造方法;通過(guò) @AllArgsConstructor
注釋自動(dòng)創(chuàng)建有參數(shù)構(gòu)造方法
如果不想使用,可以自行創(chuàng)建get,set 方法以及構(gòu)造方法
import jdk.nashorn.internal.objects.annotations.Constructor; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @NoArgsConstructor @AllArgsConstructor @Data public class User { private String userName; private String password; }
2. Controller 類
創(chuàng)建一 user 的 list ,使用 addAttribute()
方法將其放入 medol 中,以便前端取出 medol 中的數(shù)據(jù)
注意:thymeleaf解析不能帶 html 后綴,因此轉(zhuǎn)發(fā)到 table下的dynamic_table.html 文件要寫成 return "table/dynamic_table";
package com.wanqing.admin.controller; import com.wanqing.admin.bean.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.Arrays; import java.util.List; @Controller public class TableController { @GetMapping("/dynamic_table") public String dynamic_table(Model model){ // 表格內(nèi)容的遍歷 List<User> users = Arrays.asList(new User("劉婉晴", "520131"), new User("加油","aaa"), new User("不可以放棄","come on")); model.addAttribute("users", users); return "table/dynamic_table"; // thymeleaf解析不能帶 html 后綴 } }
3. html文件
創(chuàng)建 dynamic_table.html 文件在 templates 的 table 文件夾下
得到后端傳入的數(shù)據(jù)的語(yǔ)法為 ${要操作的后端傳入的數(shù)據(jù)}
- 使用
th:each="user:${users}"
遍歷得到每個(gè) user。 - 取出每個(gè) user 值放入表格中時(shí) 可以使用
th:text="${user.userName}"
也可以使用[[${user.password}]]
注: stats 為自增 id,用于記錄遍歷到第幾個(gè) user,得到數(shù)量的方法為th:text="${stats.count}"
,用 逗號(hào) 與 user 隔開(kāi)
<!--body wrapper start--> <div class="wrapper"> <div class="row"> <div class="col-sm-12"> <section class="panel"> <div class="panel-body"> <div class="adv-table"> <table class="display table table-bordered table-striped" id="dynamic-table"> <thead> <!--標(biāo)頭--> <tr> <th>#</th> <th>用戶名</th> <th>密碼</th> </tr> </thead> <tbody> <!--標(biāo)體--> <tr class="gradeX" th:each="user,stats:${users}"> <td th:text="${stats.count}">Trident</td> <td th:text="${user.userName}">Internet</td> <td>[[${user.password}]]</td> </tr> </tbody> </table> </div> </div> </section> </div> </div> </div> <!--body wrapper end-->
到此這篇關(guān)于SpringBoot使用thymeleaf實(shí)現(xiàn)前端表格的文章就介紹到這了,更多相關(guān)SpringBoot thymeleaf內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- SpringBoot使用thymeleaf實(shí)現(xiàn)一個(gè)前端表格方法詳解
- SpringBoot+thymeleaf+ajax實(shí)現(xiàn)局部刷新詳情
- 在SpringBoot中配置Thymeleaf的模板路徑方式
- springboot+thymeleaf打包成jar后找不到靜態(tài)資源的坑及解決
- SpringBoot引入Thymeleaf的實(shí)現(xiàn)方法
- springboot用thymeleaf模板的paginate分頁(yè)完整代碼
- springboot中thymeleaf模板使用詳解
- springboot 中 thymeleaf 常用的語(yǔ)法完整實(shí)例
相關(guān)文章
關(guān)于SpringBoot使用@ExceptionHandler注解局部異常處理
這篇文章主要介紹了關(guān)于SpringBoot使用@ExceptionHandler注解局部異常處理,SpringBoot提供了多種方式來(lái)處理異常,在本文中,我們將介紹SpringBoot中的@ExceptionHandler注解,演示如何使用它進(jìn)行局部異常處理2023-07-07通過(guò)代理類實(shí)現(xiàn)java連接數(shù)據(jù)庫(kù)(使用dao層操作數(shù)據(jù))實(shí)例分享
java通過(guò)代理類實(shí)現(xiàn)數(shù)據(jù)庫(kù)DAO操作代碼分享,大家參考使用吧2013-12-12SpringBoot?實(shí)現(xiàn)微信推送模板的示例代碼
這篇文章主要介紹了SpringBoot?實(shí)現(xiàn)微信推送模板,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12springboot簡(jiǎn)單實(shí)現(xiàn)單點(diǎn)登錄的示例代碼
本文主要介紹了springboot簡(jiǎn)單實(shí)現(xiàn)單點(diǎn)登錄的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01struts1實(shí)現(xiàn)簡(jiǎn)單的登錄功能實(shí)例(附源碼)
本篇文章主要介紹了struts1實(shí)現(xiàn)簡(jiǎn)單的登錄功能實(shí)例(附源碼),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04Java順序表實(shí)現(xiàn)圖書管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Java順序表實(shí)現(xiàn)圖書管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11