視圖 · 基于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.其他文件就是你模板樣式