视图 · 基于thinkphp5小功能设计与实现

#### 多余的不解释，实战才是检验标准唯一准则 1.在Application/Admin/View/目录下创建Cate目录 2..在Application/Admin/View/Cate目录下创建index.html代码如下 ~~~  <table> <tr> <th>ID</th> <th>一级分类</th> <th>排序</th> <th>操作</th> </tr> <foreach name="catelist" item="vo" > <tr> <td>{$vo.id}</td> <td><for start="1" end="$vo.level">┡</for>{$vo.catename}</td> <td>{$vo.sort}</td> <td> <div class="button-group"> <a href="{:U('Admin/Cate/edi?id='.$vo['id'])}"> 修改</a> <a href="javascript:void(0)" onClick="delCate({$vo.id})">删除</a> </td> </tr> </foreach> </table>  <label>上级分类：</label> <select name="pid" > <option value="0">请选择分类</option>不选择上级分类默认为一级分类 <foreach name="catelist" item="vo" > <option value="{$vo.id}"> <for start="1" end="$vo.level">┡</for>{$vo.catename}</option> </foreach> </select> <label>分类标题：</label><input type="text" class="input w50" name="catename" /> <button class="button bg-main icon-check-square-o" type="button" onClick="addCate()"> 提交</button>  <script> function delCate(id) { layer.confirm('您确定删除此分类吗？', { btn: ['删除','取消'] //按钮 }, function(){ $.post("{:U('Admin/Cate/ajax_delcate')}",{id:id},function(data){ if(data.status==200){ location.href = location.href; layer.msg('分类删除：'+data.content, {icon: 6}); } }) }, function(){ }); } function addCate() { var aray = { "pid":$("select[name=pid]").val(), "catename":$("input[name=catename]").val(), "sort":$("input[name=sort]").val(), } //询问框 layer.confirm('您确定添加此分类吗？', { btn: ['添加','取消'] //按钮 }, function(){ $.post("{:U('Admin/Cate/ajax_addcate')}",aray,function(data){ if(data.status==200){ location.href = location.href; layer.msg('分类添加：'+data.content, {icon: 6}); }else{ layer.msg('错误：'+data.content, {icon: 5}); } }) }, function(){ }); } </script> ~~~ 2..在Application/Admin/View/Cate目录下创建edi.html代码如下 ~~~  <form method="post" class="form-x" action=""> <label>上级分类：</label> <select name="pid" > <option value="0">请选择分类</option>不选择上级分类默认为一级分类 <foreach name="catelist" item="vo" > <option value="{$vo.id}" <if condition="$vo['id'] eq $cateinfo['pid']"> selected="selected"</if>> <for start="1" end="$vo.level">┡</for>{$vo.catename} </option> </foreach> </select> <label>分类标题：</label><input type="text" class="input w50" name="catename" value="{$cateinfo.catename}"/> <label>排序：</label><input type="text" class="input w50" name="sort" value="{$cateinfo.sort}" data-validate="number:排序必须为数字" /> <button class="button bg-main icon-check-square-o" type="button" onClick="edicate()"> 提交</button> </form>  <script> function edicate() { var aray = { "id":{$cateinfo.id}, "pid":$("select[name=pid]").val(), "catename":$("input[name=catename]").val(), "sort":$("input[name=sort]").val(), } //询问框 layer.confirm('您确定修改此分类吗？', { btn: ['添加','取消'] //按钮 }, function(){ $.post("{:U('Admin/Cate/ajax_edicate')}",aray,function(data){ if(data.status==200){ location.href = location.href; layer.msg('分类修改：'+data.content, {icon: 6}); }else{ layer.msg('错误：'+data.content, {icon: 5}); } }) }, function(){ }); } </script> ~~~ # 重点提醒： 1.需要导入jq库，至少需要1.8以上　　jQ下载地址：http://jquery.com/ 2.需要导入layer 　　layer下载地址：http://layer.layui.com/ 3.其他文件就是你模板样式