后端controller层

@RequestMapping("/comment_manage")
public String comment_managePage(Model model) {List<Comment> l = commentService.selectAllList();model.addAttribute("commentList", l);return "comment_manage";
}

Thymeleaf

我们也可以使用th:each="s,status:${students}"方式遍历，就可以把状态放在status里面了，
同时还可以用th:class="${stauts.even}?'even':'odd'"来判断奇偶。
status里面包含的信息大致如下：
属性说明index从0开始的索引值
count从1开始的索引值
size集合内元素的总量
current当前的迭代对象
even/odd boolean类型的，用来判断是偶数个还是奇数个
firstboolean类型，判断是否为第一个
lastboolean类型，判断是否为最后一个

img、onclick

<table class="table table-bordered"><thead><tr><th>#</th><th>commentId</th><th>图片</th><th>操作</th></tr></thead><tbody><tr th:each="info,infoStat:${commentList}"><td th:text="${infoStat.index}"></td><td th:text="${info.commentId}"></td><td><div class="box-body no-padding"><ul class="users-list clearfix"><img src="data:images/undefine.jpg"th:src="@{'images/'+${info.imagePath}}"style="width:40px; height:40px" alt="User Image"></ul></div></td><td><div class="btn-group"><button th:onclick="modifyComment([[${info.commentId}]]);"type="button" class="btn btn-info" data-toggle="modal"data-target="#modal-default">修改</button><button th:onclick="deleteComment([[${info.commentId}]]);"type="button" class="btn btn-success">删除</button></div></td></tr></tbody>
</table>

switch

<tr th:each="info,infoStat:${purchase_done_list}"><td th:text="${infoStat.index}"></td><td th:text="${info.orderId}"></td><td th:text="${info.sellerId}"></td><td th:text="${info.goodId}"></td><td th:text="${info.purchaserId}"></td><td th:text="${info.addressId}"></td><!-- <td th:text="${info.shippingMethod}"></td> --><td th:switch="${info.shippingMethod}"><p th:case="1">顺丰</p><p th:case="2">圆通</p><p th:case="3">中通</p><p th:case="4">申通</p><p th:case="*">其他</p></td><!-- <td th:text="${info.pickupMethod}"></td> --><td th:switch="${info.shippingMethod}"><p th:case="1">网点自提</p><p th:case="2">送货上门</p><p th:case="*">其他</p></td><!-- <td th:text="${info.usePoint}"></td> --><td th:text="${info.usePoint == true}?'是':'否'"></td><!-- <td th:text="${info.orderState}"></td> --><td th:switch="${info.orderState}"><p th:case="0">未发货</p><p th:case="1">物流中</p><p th:case="2">确认收货</p><p th:case="3">退货</p><p th:case="4">换货</p><p th:case="5">维修</p><p th:case="*">其他</p></td><td th:text="${info.gainPoint}"></td><td th:text="${info.createDate}"></td><td><div class="btn-group"><span href="#" class="btn-success new-tag">详情</span><span th:onclick="deleteOrder([[${info.orderId}]]);"type="button"class="btn-danger new-tag">删除</span></div></td>
</tr>

【前端】【thymeleaf】thymeleaf初始化的表格循环相关推荐

vue实现纯前端导入与解析excel表格文件，导出Excel
一.安装相关依赖 npm install --save xlsx file-saver 二.使用 import * as XLSX from 'xlsx/xlsx.mjs' const FileSav ...
牛逼，一款纯前端类似 excel 的在线表格
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是你们的章鱼猫. 今天的推荐是来自公众号粉丝(mengshukeji)的投稿,我们 GitHub 精选公众号希望 ...
一款纯前端类似excel的在线表格
真正的大师,永远都怀着一颗学徒的心! 一.项目简介一款纯前端类似excel的在线表格,功能强大.配置简单.完全开源,三步实现一个在线表格第一步通过CDN引入依赖 <link rel='st ...
使用vue框架，在前端实现工单动态表格
项目场景: 提示:想要使用vue框架,在前端实现工单动态表格: 问题描述提示:使用vue 框架,实现动态表格渲染,数据格式为 json 格式: 原因分析: 提示:需要用到 v-if 和 v-for ...
前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础:通过HTML表格标签布局<餐饮菜谱> 布局,是前端工作的第一步,也是前端页面能够得到展示的技术手段.对于表格式布局是简单的页面布局的基础,它是无法解决浏览器兼容性问题,因此这种布 ...
前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）
比如这个情况,当使用echart的时候: 如下图: 下面给出thymeleaf发送List给JavaScript //入学手续界面@GetMapping("/procedure") ...
springboot+mybatisplus+thymeleaf导入导出excel表格和制作饼状图，柱状图
这是我们的项目结构. 我们导入的依赖. application.yml配置文件. goods实体类 type实体类 1.导出前端代码: JavaScript代码: 通过这里跳转到后端导出的工具 ...
前端笔记-thymeleaf获取及回显input标签type=radio
如下演示: 回显: 前端代码如下: <div class="form-group"><label>性别</label><br/>&l ...
前端笔记-thymeleaf获取及回显select数据(combox)
如下: 以及回显前端代码如下: <div class="form-group"><label>选课</label><select nam ...

【前端】【thymeleaf】thymeleaf初始化的表格循环

thymeleaf初始化的表格循环

后端controller层

Thymeleaf

img、onclick

switch

【前端】【thymeleaf】thymeleaf初始化的表格循环相关推荐

最新文章

热门文章