前端html使用thymeleaf渲染
index.html
<!DOCTYPE html>
<!--引入模板引擎-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrap{
width: 100%;
height: 600px;
border: 5px solid black;
}
#left{
width: 50%;
height: 600px;
border: 1px solid red;
float: left;
}
#right{
width: 49%;
height: 600px;
border: 1px solid orangered;
float: right;
}
</style>
</head>
<body>
<form id="submitForm" action="index" method="post">
姓名:<input type="text" name="name" th:value="${name}"/>
<input type="submit" value="提交">
<div id="wrap">
<div id="left">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年级</th>
<th>操作</th>
</tr>
<!-- @{引用路径} #{做国际化} ${取值} *{} -->
<tr th:each="student:${pages.getContent()}">
<td th:text="${student.id}">123</td>
<td th:text="${student.name}">Data</td>
<td th:text="${student.sex}">Data</td>
<td th:text="${student.gradeId}">Data</td>
<td>
<a href="javascript:void(0)" th:href="@{/del/(id=${student.id})}">删除</a>
<a href="javascript:void(0)" th:href="@{/edit(id=${student.id})}">修改</a>
</td>
</tr>
</table>
<input type="button" value="首页" onclick="huan(1);"/>
<input type="button" value="上一页" th:onclick="huan([[${pages.getNumber()+1}]]-1)"/>
<input type="button" value="下一页" th:onclick="huan([[${pages.getNumber()+1}]]+1)"/>
<input type="button" value="尾页" th:onclick="huan([[${pages.getTotalPages()}]])"/>
总页数:<span th:text="${pages.getTotalPages()}" id="sum"></span>/当前页数:[[${pages.getNumber()+1}]]
</div>
<a href="javascript:void(0)" th:href="@{/edit}">新增</a>
</div>
</form>
<script src="/jquery-1.7.1.js"></script>
<script type="text/javascript">
function huan(page){
if (page>$("#sum").text()){
page=$("#sum").text();
}
$("#submitForm").attr("action", "/index?page=" + page).submit();
}
</script>
</body>
</html>
edit.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post" th:action="${student==null}?@{/add}:@{/upd}">
<input type="hidden" th:value="${student?.id}" name="id"/>
<p>姓名:<input type="text" name="name" th:value="${student?.name}"/></p>
<p>性别:
<input type="radio" name="sex" value="男" th:checked="${student?.sex} eq '男'">男
<input type="radio" name="sex" value="女" th:checked="${student?.sex} eq '女'">女
</p>
<p>年级:
<select name="gradeId">
<option value="1" th:selected="${student?.gradeId} eq '1'">S1</option>
<option value="2" th:selected="${student?.gradeId} eq '2'">S2</option>
<option value="3" th:selected="${student?.gradeId} eq '3'">Y2</option>
</select>
</p>
<input type="submit" value="提交"/>
</form>
</body>
</html>
扫一扫
6511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
