
Thinkphp5学习008-项目案例-学生列表模板设计
通过学生列表模板学习以下内容
1.导航
2.表格
3.按钮
4.模态窗口
5.ajax提交
一.建立导航模板文件nav.html
在nav.html中,主要实现 了导航、模态窗口、ajax(异步)提交 三部分代码

学生列表指向:href="{:url('index/student/all')}"
添加学生指向:href="{:url('index/student/add')
修改密码指向:###
退出指向:href="{:url('index/index/logout')}"
-------------------------------------------------------------------
二.学生列表文件all.html
效果将会这样

这里包含了另外一个模板文件nav.html
在body区,有这样一行代码:
<{include file="nav.html"}>
编辑:href="{:url('edit')}?no={$row.no}"
删除:<script>
function delstudent(no) {
var ret = window.confirm('真得要删除学号' + no + '的学生吗')
if (ret) {
window.location.href = "{:url('del')}?no=" + no;
}
}
</script>
href="javascript:delstudent('{$row.no}')"
==============
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>学生列表</title>
<{include file="head"}>
<style>
.title {
margin: 10px auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<{include file="nav"}>
<h3>学生列表</h3>
<table class="table table-bordered table-hover">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<{volist name="student" id="row"}>
<tr>
<td>{$row.no}</td>
<td>{$row.name}</td>
<td>{$row.sex}</td>
<td>{$row.age}</td>
<td>
<ahref="{:url('edit')}?no={$row.no}">编辑</a>
<a href="javascript:delstudent('{$row.no}')"class="btn btn-danger">删除</a>
</td>
</tr>
<{/volist}>
</table>
</div>
</body>
</html>
<script>
function delstudent(no) {
var ret = window.confirm('真得要删除学号' + no + '的学生吗')
if (ret) {
window.location.href = "{:url('del')}?no=" + no;
}
}
</script>================
模板先设计到此,还有控制器,下一节会学习控制器代码。
我是拿来主义,能读懂以上代码就很好啦!