Thinkphp5学习012-项目案例-编辑学生模板设计
Thinkphp5学习012-项目案例-编辑学生模板设计
一.在student\中添加edit.html
<!doctype html>
<html lang="en">
<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"}>
</head>
<body>
<div class="container">
<{include file="nav"}>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">编辑学生</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" action="{:url('do_edit')}" method="post">
<div class="form-group">
<label for="no" class="col-sm-2 control-label">学号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="no" name="no" value="{$student.no}" readonly>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" value="{$student.name}"
placeholder="姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" value="男" <{eq name="student.sex" value="男"}>checked<{/eq}>>
男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="女" <{eq name="student.sex" value="女"}>checked<{/eq}>>
女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="age" name="age" value="{$student.age}"
placeholder="年龄">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提交</button>
<a href="{:url('all')}" class="btn btn-default">返回</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script>
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
no: {
validators: {
notEmpty: {
message: '学号不能为空'
}
}
},
name: {
validators: {
notEmpty: {
message: '姓名不能为空'
}
}
},
age: {
validators: {
notEmpty: {
message: '年龄不能为空'
}
}
}
}
});
});
</script>
一.我们在学生列表的页面中有“编辑”按钮
我们点击它，应该是去传递一个学号去一下方法再查询数据库，再返回一个页面中
二.下面是返回的页面的模板设计
学习：
提交：action="{:url('do_edit')}" method="post"
<button type="submit" class="btn btn-primary">提交</button>
所在在控制器中要写一个方法：do_edit();
返回：<a href="{:url('all')}" class="btn btn-default">返回</a>
注意：编辑学生的页面效果，基本同”添加学生“的页面，唯一不同的是，各个文本框中显示要编辑的学生的信息
1. 学号不能编辑的
2. 上面的代码中，我们需要学习是以下代码
<input type="text" class="form-control" id="no" name="no" value="{$student.no}" readonly>
<input type="text" class="form-control" id="name" name="name" value="{$student.name}"
placeholder="姓名">
<input type="radio" name="sex" value="男" <{eq name="student.sex" value="男"}>checked<{/eq}>>
<input type="radio" name="sex" value="女" <{eq name="student.sex" value="女"}>checked<{/eq}>>
<input type="text" class="form-control" id="age" name="age" value="{$student.age}"
placeholder="年龄">
文本框中的value值，是控制器传递过来的，需要显示出来
最大的难点是：如何选中”男“，”女“ 两个单选按钮，我们使用tp5模板自带的控制语句 eq
其中name是变量，value是值，使用eq 判断 判断两者是否相等
有关eq的操作，详见tp5完全开发手册”模板-内置标签-比较标签“
腾讯云开发者
