thymeleaf的初次使⽤(带参请求以及调⽤带参js⽅法)
之前对于前端框架接触较少,第⼀次接触thymeleaf,虽说看起来并不复杂但我还是花费了好⼀会⼉才弄懂。
话不多少下⾯就简单说⼀下我在项⽬中的应⽤。
⾸先是java代码 controller层将需要在前端展⽰的信息放⼊model中:
@RequestMapping("getAll")
public String getAll(Model model){
List<ScheduleJob> list = AllJob();
model.addAttribute("list", list);
return "sch/quartz/list";
}
之后便是在前端html页⾯的遍历
1<tr th:each="job:${list}">
2<td th:text="${job.name }">任务名</td>
3<td th:text="${up }">任务组</td>
4<td th:text="${job.status }">状态</td>
5<td th:text='${Expression }'></td>
6<td th:text="${job.className }">类名</td>
7<td th:text="${job.description }">描述</td>
8<td><a href="#" th:href="@{/quartz/pause(name=${job.name},group=${up})}">暂停</a></td>
9<td><a href="#" th:href="@{/quartz/resume(name=${job.name},group=${up})}">恢复</a></td>
10<td><a href="#" th:href="@{/quartz/run(name=${job.name},group=${up})}">执⾏⼀次</a></td>
11<td><a href="#" th:href="@{/quartz/delete(name=${job.name},group=${up})}">删除</a></td>
12<td><button id="edit" th:name="${job.name}" th:id="${up}" onclick="test(this)">修改cron表达式</button></td>
13</tr>
这⾥直接在<tr>标签中⽤ th:each 放⼊需要遍历的内容,以及定义变量名;在<td>标签中⽤th:text来展⽰内容。href标签怎么用
在<a>标签中⽤普通的href不能实现带参的接⼝请求,所以需要使⽤ th:href 的这种语法来实现带参的接⼝请求,参数⽤()跟在后⾯就可以。
⾄于调⽤js的带参⽅法就需要⽤12⾏那种办法将参数作为 th 标签的name或者id传⼊⽅法中,具体的js⽅法如下;
1function test(obj){
2var cron = $("#cron").val();
3var name = $(obj).attr("name");
4var group = $(obj).attr("id");
5        $.post("edit",{"name":name,"group":group,"cron":cron},function(){
6            alert("更新成功");
7            load();
8        });
9    }
这样就能实现js带参⽅法的调⽤,⽬前来说我所知道的可以实现的就是这种⽅式。
补充⼀点,前端遍历的实体类需要重写toString⽅法,并且必须是如下格式的:
1 @Override
2public String toString() {
3        StringBuilder builder = new StringBuilder();
4        builder.append("{name:\"");
5        builder.append(name);
6        builder.append("\", group:\"");
7        builder.append(group);
8        builder.append("\", cronExpression:\"");
9        builder.append(cronExpression);
10        builder.append("\", status:\"");
11        builder.append(status);
12        builder.append("\", description:\"");
13        builder.append(description);
14        builder.append("\", className:\"");
15        builder.append(className);
16        builder.append("\"}");
String();
18    }
这样才能在页⾯上成功遍历。
对于thymeleaf,⽬前我也就掌握了这些简单的使⽤。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。