標籤：dex assign blog public 架構 var input extend splay
寫在前面的話：應客戶需求需要給後台增加自助添加電影名稱和連結的功能，添加後在前台能自動讀取顯示。
開發步驟：
1、由於是給後台添加一個增加電影及電影連結的功能，所以控制器在Admin下。
在路徑 Application\Lib\Action\Admin 下建立控制器 MvaddAction.class.php
控制器全部代碼如下：
<?php//繼承PublicAction後訪問本頁面時必須先登入後台class MvaddAction extends PublicAction { public function index() { $result = M("movie")->select(); //var_dump($result);exit; $this->assign("name",$result); $this->display (); } public function add() { $data["mvname"] = $_POST["name"]; $data["mvlink"] = $_POST["mvlink"]; $result = M("movie")->add($data); if($result){ $this->ajaxReturn($result,"新增成功！",1); //echo "ok"; } } public function del(){ $id = $_POST[‘id‘]; $result = M("movie")->where(array("id"=>$id))->delete(); if($result){ $this->ajaxReturn($result,"刪除成功！",1); } } public function show(){ $id = $_GET[‘id‘]; $link = M("movie")->where(array("id"=>$id))->find(); $this->assign("link",$link[‘mvlink‘]); $this->display(); }}
2、添加模板
在 Application\Tpl\Admin\Mvadd 目錄下添加靜態頁面模板 index.html
靜態頁面為已經全部開發完成的頁面。
前端架構採用bootstrap
<!DOCTYPE HTML><html lang="zh-CN"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css" rel="stylesheet"></head><script src="http://code.jquery.com/jquery-1.4.1.min.js"></script><body><form role="form" action="#"> <div class="form-group"> <label for="exampleInputEmail1">電影名稱</label> <input type="text" class="form-control" id="mvname" placeholder="請輸入電影名稱 如：精品電影"> </div> <div class="form-group" > <label for="exampleInputPassword1">電影連結</label> <input type="text" class="form-control" id="mvlink" placeholder="電影連結：如 http://www.029gc.cn"> </div><button type="button" id="add" class="btn btn-primary btn-lg btn-block" style="width:20%;align:center;">儲存</button></form><table class="table table-bordered"> <tr id="tr"><td>名稱</td><td>連結</td><td>操作</td></tr> <foreach name="name" item="vo"> <tr id="{$vo.id}tr"><td>{$vo.mvname}</td><td>{$vo.mvlink}</td><td><a href="javascript:void(0)" onclick=dellink({$vo.id});>刪除</a></td></tr> </foreach></table></body><SCRIPT type=text/javascript>$("#add").click(function (){var name = $("#mvname").val();var link = $("#mvlink").val();if(name==""||link==""){alert("電影名稱或連結不可為空");return;}else{$.ajax({ url: "../index.php?g=Admin&m=Mvadd&a=add", type: "POST", data:{"name":name,"mvlink":link}, dataType: "json", error: function(){ alert(‘Error loading XML document‘); }, success: function(data){ alert(data.info); $("#tr").after("<tr id="+data.data+"tr><td>"+name+"</td><td>"+link+"</td><td><a href=‘javascript:void(0)‘ onclick=dellink1("+data.data+");>刪除</a></td></tr>") } });}}); function dellink(id){$.ajax({ url: "../index.php?g=Admin&m=Mvadd&a=del", type: "POST", data:{"id":id}, dataType: "json", error: function(){ alert(‘Error loading XML document‘); }, success: function(data){ alert(data.info); $("#"+id+"tr").remove(); } });} </SCRIPT></html>
技術點：
動態增加和刪除表格中的資料。
thinkphp ajax添加及刪除
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
