web 实验-遍历数据
# 350.web 实验-遍历数据
接下来改一下小的功能以及表格的遍历功能
# 修改 Dashboard
我们左侧菜单中,Dashboard
(可以理解为是)默认还是跳转到 index.html:
common.html 源码:
<li class="active">
<a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a>
</li>
1
2
3
2
3
因此要修改为 @{/main.html}
<li class="active">
<a th:href="@{/main.html}"><i class="fa fa-home"></i> <span>Dashboard</span></a>
</li>
1
2
3
2
3
# 修改退出
同理,修改退出的链接为 /
:
<li><a th:href="@{/}"><i class="fa fa-sign-out"></i> Log Out</a></li>
1
# 表格遍历
需求:修改 Advanced table 页面,使其表格的数据不是固定的,而是从服务器获取数据后渲染:
假设我们返回的是用户信息,我们先给 User 类加上有参和无参的 Lombok 注解:
package com.peterjxl.learnspringbootwebadmin.bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
public class User {
private String userName;
private String password;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 修改 Controller
修改方法,返回一些用户数据:
@GetMapping("/dynamic_table")
public String dynamic_table(Model model){
List<User> users = Arrays.asList(new User("zhangsan", "123456"),
new User("lisi", "123444"),
new User("haha", "aaaaa"),
new User("hehe", "aaddd"));
model.addAttribute("users", users);
return "table/dynamic_table";
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 修改 HTML
接下来修改 dynamic_table.html 文件,将下方的那个表格中 tbody
标签的内容删除(从 522 行到 900 多行);
然后通过 Thymeleaf 的 遍历语法 (opens new window),来输出数据:
<table class="display table table-bordered" id="hidden-table-info">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="user,stats:${users}">
<td th:text="${stats.count}"></td>
<td th:text="${user.userName}"></td>
<td>[[${user.password}]]</td>
</tr>
</tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
测试:重启项目,登录,可以看到能正常渲染数据出来
# 源码
已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo3,读者可以通过切换分支来查看本文的示例代码
上次更新: 2024/10/3 10:01:52