PHP Ajax réalise l'édition de tables en temps réel-js tutoriel-php.cn

PHP Ajax réalise l'édition de tables en temps réel

韦小宝

Libérer： 2018-01-01 19:39:41

original

1619 Les gens l'ont consulté

Cet article présente principalement la méthode Ajax pour réaliser l'édition de tables en temps réel. Il a une bonne référence et une bonne valeur pour l'apprentissage d'Ajax. Suivons l'éditeur pour voir comment PHP Ajax implémente l'édition des tableaux en temps réel

Ce serait cool si nous pouvions exploiter toutes les données d'un tableau sur cette page (c'est génial de l'utiliser pour faire sauter ? poulet)!

Cette fonction peut être réalisée en utilisant Ajax. Sans plus tarder, je posterai la démo que j'ai écrite ci-dessous, haha. Je suis plus habitué au framework TP (3.2) que j'utilise.

La première est la partie code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX实时编辑</title>
<script src="/Public/jquery-1.7.2.min.js"></script>
</head>
<body>
<center>
<table border="1" width="1000" id="g_table">
<tr>
<!-- <th>ID</th> -->
<th>TAB1</th>
<th>TAB2</th>
<th>TAB3</th>
<th>TAB4</th>
<th><span onclick="add()">添加</span></th>
</tr>
<foreach name="tablist" item="vv">
<tr>
<!-- <td>{$vv.id}</td> -->
<input type="hidden" name="id" value="{$vv.id}">
<td>{$vv.tab1}</td>
<td>{$vv.tab2}</td>
<td>{$vv.tab3}</td>
<td>{$vv.tab4}</td>
<td><span onclick="del(this)" id="del">删除</span><span onclick="edit(this)" id="edit">修改</span></td>
</tr>
</foreach>
</table>
</center>
</body>
<script>
var g_table = $("#g_table");
function add(){
var addRow = $("<tr></tr>");

g_table.append(addRow);
for(var i = 0;i < 4;i++){
var col_td = $("<td><input type=&#39;text&#39; /></td>");
addRow.append(col_td);
}
var col_opt = $("<td></td>");
var confirmBtn = $("<a href=&#39;javascript:;&#39;>确认</a>");
var cancelBtn = $("<a href=&#39;javascript:;&#39;>取消</a>");
cancelBtn.click(function(){
window.location.reload();
});
confirmBtn.click(function(){
var currentRow = $(this).parent().parent();
var input_files = currentRow.find("input");
var post_files = {};
for(var i = 0 , j = input_files.length;i < j;i++){
post_files[&#39;clo_&#39; + i] = input_files[i].value;
}
// $.post("{:U(&#39;ajax/add&#39;)}",post_files,function(msg){
// debugger;
// })
$.ajax({
type: &#39;post&#39;,
url : "{:U(&#39;ajax/add&#39;)}",
data: {post_files},
success:function(msg){
alert(msg);
window.location.reload();
}
})
});
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
}
function del(obj){
var id = $(obj).parent().prev().prev().prev().prev().prev().val();
$.ajax({
type: &#39;post&#39;,
url: "{:U(&#39;ajax/del&#39;)}",
data: {id:id},
success:function(msg){
alert(msg);
}
})
$(obj).parent().parent().remove();
}
function edit(obj){
var id = $(obj).parent().prev().prev().prev().prev().prev().val();
for(var i = 1;i < 5;i++){
var temp = "<td><input type=&#39;text&#39; value=&#39;" + $(obj).parent().parent().children().eq(i).html() + "&#39;/></td>";
$(obj).parent().parent().children().eq(i).replaceWith(temp);
}
var confirmBtn1 = $("<span id=&#39;confirm&#39;>确认</span>");
var cancelBtn1 = $("<span onclick=&#39;back()&#39;>取消</span>");
confirmBtn1.click(function(){
var currentRow = $(this).parent().parent();
var input_files = currentRow.find("input");
var post_files = {};
for(var i = 0 , j = input_files.length;i < j;i++){
post_files[&#39;clo_&#39; + i] = input_files[i].value;
}
$.ajax({
type: &#39;post&#39;,
url : "{:U(&#39;ajax/edit&#39;)}",
data: {post_files:post_files,id:id},
success:function(msg){
alert(msg);
window.location.reload();
}
}) 
});
$(obj).prev().replaceWith(confirmBtn1);
$(obj).replaceWith(cancelBtn1);

}
function back(){
location.reload();
} 
</script>
</html>

Copier après la connexion

Voici le code dans le contrôleur :

<?php 

namespace Home\Controller;
use Think\Controller;
class AjaxController extends Controller{
public function index(){
$tab = M(&#39;table&#39;);
$tablist = $tab->select();
$this->assign(&#39;tablist&#39;,$tablist);
$this->display();
}
public function del(){
$map[&#39;id&#39;] = $_POST[&#39;id&#39;];
$tab = M(&#39;table&#39;);
$info = $tab->where($map)->delete();
if($info){
$this->ajaxReturn("删除成功");
}else{
$this->ajaxReturn("删除失败");
}

}
public function add(){

$map[&#39;tab1&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_0&#39;];
$map[&#39;tab2&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_1&#39;];
$map[&#39;tab3&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_2&#39;];
$map[&#39;tab4&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_3&#39;];
$tab = M(&#39;table&#39;);
$res = $tab->add($map);
if($res){
$this->ajaxReturn("添加成功");
}else{
$this->ajaxReturn("添加失败");
}
}
public function edit(){
$id = $_POST[&#39;id&#39;];
$map[&#39;tab1&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_1&#39;];
$map[&#39;tab2&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_2&#39;];
$map[&#39;tab3&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_3&#39;];
$map[&#39;tab4&#39;] = $_POST[&#39;post_files&#39;][&#39;clo_4&#39;];
// dump($map);exit;
$tab = M(&#39;table&#39;);
$res = $tab->where(&#39;id=&#39;.$id)->save($map);
if($res){
$this->ajaxReturn("更新成功");
}else{
$this->ajaxReturn("更新失败");
}
}
}

Copier après la connexion

Ce qui précède est tout le contenu de cet article, j'espère qu'il sera utile à tout le monde !

Recommandations associées :

Un résumé de la façon d'utiliser Ajax et jsonp

Un moyen simple de télécharger des fichiers de manière asynchrone avec Ajax

Exemples pour expliquer les méthodes de vérification de l'unicité des e-mails et des noms d'utilisateur Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!