이 글에서는 테이블의 실시간 편집을 구현하는 Ajax 방식을 주로 소개합니다. 이는 Ajax 학습에 좋은 참고 자료이자 가치가 있습니다. 편집기를 따라가면서 PHP Ajax가 어떻게 테이블의 실시간 편집을 구현하는지 살펴보겠습니다.
이 페이지에서 테이블의 모든 데이터를 조작할 수 있다면 얼마나 좋을까요(사용하는 것이 정말 멋집니다) 재미있습니다!
이 기능은 Ajax를 사용하여 구현할 수 있습니다. 더 이상 고민하지 말고 아래에 제가 작성한 데모를 게시하겠습니다. 하하. 나는 내가 사용하는 TP 프레임워크(3.2)에 더 익숙합니다.
첫 번째는 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='text' /></td>"); addRow.append(col_td); } var col_opt = $("<td></td>"); var confirmBtn = $("<a href='javascript:;'>确认</a>"); var cancelBtn = $("<a href='javascript:;'>取消</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='text' value='" + $(obj).parent().parent().children().eq(i).html() + "'/></td>"; $(obj).parent().parent().children().eq(i).replaceWith(temp); } var confirmBtn1 = $("<span id='confirm'>确认</span>"); var cancelBtn1 = $("<span onclick='back()'>取消</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>
다음은 컨트롤러의 코드입니다.
<?php namespace Home\Controller; use Think\Controller; class AjaxController extends Controller{ public function index(){ $tab = M('table'); $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("更新失败"); } } }
위는 이 기사의 모든 내용입니다. 도움이 되기를 바랍니다. 모두에게!
관련 권장 사항:
Ajax를 사용하여 비동기적으로 파일을 다운로드하는 간단한 방법
Ajax 이메일 및 사용자 이름 고유성 확인 방법을 설명하는 예
위 내용은 PHP Ajax는 테이블의 실시간 편집을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!