首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Thinkphp5学习008-项目案例-学生列表模板设计

Thinkphp5学习008-项目案例-学生列表模板设计

作者头像
哆哆Excel
发布于 2022-10-25 14:28:52
发布于 2022-10-25 14:28:52
5780
举报
文章被收录于专栏:哆哆Excel哆哆Excel

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}')"

代码语言:javascript
复制
==============
<!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>
                &nbsp;&nbsp;
                <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>

================

模板先设计到此,还有控制器,下一节会学习控制器代码。

我是拿来主义,能读懂以上代码就很好啦!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-01-02,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档