thymeleaf的初次使用(带参请求以及调用带参js方法)
2016-06-28 11:28
525 查看
之前对于前端框架接触较少,第一次接触thymeleaf,虽说看起来并不复杂但我还是花费了好一会儿才弄懂。
话不多少下面就简单说一下我在项目中的应用。
首先是java代码 controller层 将需要在前端展示的信息放入model中:
之后便是在前端html页面的遍历
这里直接在<tr>标签中 用 th:each 放入需要遍历的内容,以及定义变量名;在<td>标签中用th:text来展示内容。
在<a>标签中用 普通的href不能实现带参的接口请求,所以需要使用 th:href 的这种语法来实现带参的接口请求,参数用()跟在后面就可以。
至于调用js的带参方法就需要用12行那种办法 将参数作为 th 标签的name或者id传入方法中,具体的js方法如下;
这样就能实现js带参方法的调用,目前来说我所知道的可以实现的就是这种方式。
补充一点,前端遍历的实体类需要重写toString方法,并且必须是如下格式的:
这样才能在页面上成功遍历。
对于thymeleaf,目前我也就掌握了这些简单的使用。
话不多少下面就简单说一下我在项目中的应用。
首先是java代码 controller层 将需要在前端展示的信息放入model中:
@RequestMapping("getAll") public String getAll(Model model){ List<ScheduleJob> list = scheduleJobService.getAllJob(); model.addAttribute("list", list); return "sch/quartz/list"; }
之后便是在前端html页面的遍历
<tr th:each="job:${list}"> <td th:text="${job.name }">任务名</td> <td th:text="${job.group }">任务组</td> <td th:text="${job.status }">状态</td> <td th:text='${job.cronExpression }'></td> <td th:text="${job.className }">类名</td> <td th:text="${job.description }">描述</td> <td><a href="#" th:href="@{/quartz/pause(name=${job.name},group=${job.group})}">暂停</a></td> <td><a href="#" th:href="@{/quartz/resume(name=${job.name},group=${job.group})}">恢复</a></td> <td><a href="#" th:href="@{/quartz/run(name=${job.name},group=${job.group})}">执行一次</a></td> <td><a href="#" th:href="@{/quartz/delete(name=${job.name},group=${job.group})}">删除</a></td> <td><button id="edit" th:name="${job.name}" th:id="${job.group}" onclick="test(this)">修改cron表达式</button></td> </tr>
这里直接在<tr>标签中 用 th:each 放入需要遍历的内容,以及定义变量名;在<td>标签中用th:text来展示内容。
在<a>标签中用 普通的href不能实现带参的接口请求,所以需要使用 th:href 的这种语法来实现带参的接口请求,参数用()跟在后面就可以。
至于调用js的带参方法就需要用12行那种办法 将参数作为 th 标签的name或者id传入方法中,具体的js方法如下;
function test(obj){ var cron = $("#cron").val(); var name = $(obj).attr("name"); var group = $(obj).attr("id"); $.post("edit",{"name":name,"group":group,"cron":cron},function(){ alert("更新成功!!!"); window.location.reload(); }); }
这样就能实现js带参方法的调用,目前来说我所知道的可以实现的就是这种方式。
补充一点,前端遍历的实体类需要重写toString方法,并且必须是如下格式的:
@Override public String toString() { StringBuilder builder = new StringBuilder(); builder.append("{name:\""); builder.append(name); builder.append("\", group:\""); builder.append(group); builder.append("\", cronExpression:\""); builder.append(cronExpression); builder.append("\", status:\""); builder.append(status); builder.append("\", description:\""); builder.append(description); builder.append("\", className:\""); builder.append(className); builder.append("\"}"); return builder.toString(); }
这样才能在页面上成功遍历。
对于thymeleaf,目前我也就掌握了这些简单的使用。
相关文章推荐
- <%@include file="a.jsp"%> jsp引用jsp文件时候注意
- 浅谈js的url解析函数封装
- js 倒计时 跳转
- EL和JSTL
- jsp的语法
- 页面导航随滚动条悬浮或者停靠
- dom 节点(文档对象模型)详细介绍
- JavaScript中点击事件的写法
- 【gulp.js】中大型项目构建发布实例
- js-时间运算与格式
- JavaScript 有多灵活?
- JavaScript学习笔记十二:高阶函数-filter
- js 设置和调用Cookie
- 网页热力图 heatmap js
- Angular.js学习笔记
- JavaScript跨域方法汇总
- 常用javascript函数总结
- js 的点击事件
- json转table
- js总是乱码