thymeleaf如何迭代遍历,如何判断

举报
穆雄雄 发表于 2022/12/10 20:16:15 2022/12/10
【摘要】 ​编辑大家好,我是雄雄,欢迎关注公众号【雄雄的小课堂】。最近,换了个桌面​编辑手机的也同步换了下:​编辑哈哈哈,自己看着舒服就行~这几天在业余时间搞一个电商项目,可以说是边学边做,效率比较低,但是通过做这个项目,的的确确的能学到不少,每天都抽出点时间往后做做,bug在不知不觉中解决……今天主要是记录一下thymeleaf在前台的迭代读取与遍历。以前在遇到页面中数据迭代时,用的最多的要数jst...

​编辑

大家好,我是雄雄,欢迎关注公众号【雄雄的小课堂】。

最近,换了个桌面

​编辑

手机的也同步换了下:

​编辑

哈哈哈,自己看着舒服就行~

这几天在业余时间搞一个电商项目,可以说是边学边做,效率比较低,但是通过做这个项目,的的确确的能学到不少,每天都抽出点时间往后做做,bug在不知不觉中解决……

今天主要是记录一下thymeleaf在前台的迭代读取与遍历。

以前在遇到页面中数据迭代时,用的最多的要数jstl表达式了,除了jstl表达式外,thymeleaf倒也是个不错的选择,并且使用起来也特别简单。

首先需要引入thymeleaf依赖,代码如下:

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

通过springmvc获取到数据,放在model中就可以在页面中获取,控制器中的代码如下所示:

//查询所有的商品信息
    @RequestMapping("getProList")
    public String findAllPro(Model model){
        model.addAttribute("proList",productService.findAllProduct());
        return "proList";
    }

然后在页面中我们就可以遍迭代数据了。

迭代表格:

<table class="layui-table" lay-size="lg">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>图片</th>
        <th>价格</th>
        <th>库存</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!--遍历用户信息-->
    <tr th:each="pro : ${proList}">
        <td th:text="${pro.id}"></td>
        <td th:text="${pro.name}"></td>
        <td>
           <img th:src="'/images/'+${pro.fileName}" width="50px" height="50px">
        </td>
        <td th:text="${pro.price}"></td>
        <td th:text="${pro.stock}"></td>
       <!-- <td th:if="${#strings.isEmpty(pro.description)}">暂无描述</td>-->
        <td th:text="${pro.description eq null or pro.description eq ''}? '暂无描述':${pro.description}"></td>
        <td>
            <button type="button" class="layui-btn layui-btn layui-btn-normal layui-btn-xs">
                <i class="layui-icon">&#xe642;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs">
                <i class="layui-icon">&#xe640;</i>
            </button>
        </td>
    </tr>
    </tbody>
</table>

迭代下拉列表:

<div class="layui-input-inline" style="width: 20%">
            <select name="categorylevelthreeId" id="three">
                <option value="">请选择</option>
                <option  th:each="cate : ${threeList}" th:value="${cate.id}" th:text="${cate.name}"></option>
            </select>
        </div>

其他迭代基本都一样,那如果我们需要在迭代的过程中判断,该如何写呢?

可以使用下面两种方式:

<td th:text="${user.state eq 0}? '已禁用' : '正常使用'" ></td>

<td th:text="${pro.description eq null or pro.description eq ''}? '暂无描述':${pro.description}"></td>

效果如下:

​编辑

​编辑

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。