recherche

Maison >interface Web >js tutoriel >Comment PHP+Ajax réalise l'édition de tables en temps réel

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

php中世界最好的语言
php中世界最好的语言original
2018-03-31 17:24:591998parcourir

Cette fois, je vais vous montrer comment implémenter l'édition de tables en temps réel avec PHP + Ajax Quelles sont les précautions pour PHP + Ajax pour implémenter l'édition de tables en temps réel. cas pratique, jetons un coup d'oeil.

Quelle chose cool ce serait si nous pouvions exploiter toutes les données dans un tableau sur cette page (c'est tellement excitant à utiliser) !

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.

Le premier 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['clo_' + i] = input_files[i].value;
}
// $.post("{:U('ajax/add')}",post_files,function(msg){
// debugger;
// })
$.ajax({
type: 'post',
url : "{:U('ajax/add')}",
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: 'post',
url: "{:U('ajax/del')}",
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['clo_' + i] = input_files[i].value;
}
$.ajax({
type: 'post',
url : "{:U('ajax/edit')}",
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>

Ce qui suit est 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('tablist',$tablist);
$this->display();
}
public function del(){
$map['id'] = $_POST['id'];
$tab = M('table');
$info = $tab->where($map)->delete();
if($info){
$this->ajaxReturn("删除成功");
}else{
$this->ajaxReturn("删除失败");
}
}
public function add(){
$map['tab1'] = $_POST['post_files']['clo_0'];
$map['tab2'] = $_POST['post_files']['clo_1'];
$map['tab3'] = $_POST['post_files']['clo_2'];
$map['tab4'] = $_POST['post_files']['clo_3'];
$tab = M('table');
$res = $tab->add($map);
if($res){
$this->ajaxReturn("添加成功");
}else{
$this->ajaxReturn("添加失败");
}
}
public function edit(){
$id = $_POST['id'];
$map['tab1'] = $_POST['post_files']['clo_1'];
$map['tab2'] = $_POST['post_files']['clo_2'];
$map['tab3'] = $_POST['post_files']['clo_3'];
$map['tab4'] = $_POST['post_files']['clo_4'];
// dump($map);exit;
$tab = M('table');
$res = $tab->where('id='.$id)->save($map);
if($res){
$this->ajaxReturn("更新成功");
}else{
$this->ajaxReturn("更新失败");
}
}
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax+Spring pour implémenter le téléchargement de fichiers

Comment utiliser Ajax pour charger dynamiquement des données

Comment Ajax implémente-t-il la barre de progression du téléchargement de fichiers Codular

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Cas pratique simple AjaxArticle suivant：Cas pratique simple Ajax

Articles Liés

Voir plus