개발 꿀팁/PHP

php와 ajax는 어떻게 표의 실시간 편집이 가능합니까(코드 첨부)

Jammie 2022. 7. 25. 17:20
반응형

이 글은 php와 ajax가 어떻게 표의 실시간 편집(코드 첨부)을 할 수 있는지에 대한 내용으로 참고가치가 있으니 꼭 참고하시길 바랍니다.
AJAX용 씬
비동기 검색 필터 내용 데이터 (키워드 검색)

양식 비동기 인증 (양식 제출 인증)

비동기 콘텐츠 데이터 로드 (더 많은 콘텐츠)

데이터 논리 처리

AJAX 포인트
현재 페이지를 새로 고치지 않고 서버와 비동기식으로 대화하기

브라우저와 서버 간 데이터 전송을 최적화하고 불필요한 데이터 왕래를 줄였다.

일부 데이터를 클라이언트로 전송하여 서버의 압력을 줄였다

AJAX의 기본 사고를 실현하다
필요에 따라 javascript 라이브러리 선택

javascript에서 서버로 데이터 전송

php가 전달받은 데이터를 받아 처리하고 javascript로 반환합니다.

javascript는 php의 데이터를 받아 그에 따라 처리한다

기초 지식
프런트엔드: HTML css javascript jquery json

서버 측:phpapache(nginx)

데이터베이스 측면: mysql sql

학습 목표
php와 javascript의 비동기 상호 작용을 학습하다

ajax 코드의 작동 구조와 기본 원리를 이해하다

자바스크립트 코드 명확화

효과도
여기에 그림 설명을 쓰시오

코드 구현
기본 데이터 시트 만들기

표시 기능 완료

데이터 삭제 기능 완료

데이터 기능 추가 완료

데이터 수정 기능 완료

테이블 SQL

create table et_data(

    id int primary key auto_increment,

    c_a varchar(30),

    c_b varchar(30),

    c_c varchar(30),

    c_d varchar(30),

    c_e varchar(30),

    c_f varchar(30),

    c_g varchar(30),

    c_h varchar(30)

);

데이터 보기 프로세스
기본 HTML 보이기

$.get=====>data.php

data.php db 데이터 가져오기==>js

js=> 줄 생성, 기본 HTML로 보내기

데이터 추가 전측 구조 구축
UI 추가 버튼, 8개의 텍스트 상자 동작 열

기능 취소

추가 버튼 확인, UI 데이터 수집 ->data.php

data.php ->js

목록이 정상적으로 표시되며, 새로 고침 후에도 기록이 남아 있습니다.

편집 기능
편집 단추에 이벤트 추가, UI 삭제 단추 바꾸기> 저장버튼 편집버튼 -> 취소버튼

이벤트 편집 취소

편집한 이벤트, 핸드폰 데이터 저장 -> data.phP

data.php ->js

js 행 편집 상태= > 정상 상태

소스 코드 표시 및 분석
1,스타일:main.css

body{background-color:#899BA5;}

.container {width:960px;margin:80px auto;}

td {font-size:20px;width:120px;height:40px;text-align:center;color:black;cursor:pointer;background-color:white;}

td:hover{background-color:#aaaacc;}

input.txtField{width:90px;height:30px;}

.optLink{text-decoration:none;  color:#f46948;}

.optLink:hover{color:#cc0033;}

2, 기본 템플릿:index.html

<!doctype html><html>

    <head>

        <meta charset="utf-8">

        <title>可编辑表格DEMO</title>

        <link rel="stylesheet" href="css/main.css" >

    </head>

    <body>

        <p class="container">

            <table class="data">

                <tr>

                    <td>1</td>  

                    <td>2</td>  

                    <td>3</td>  

                    <td>4</td>  

                    <td>5</td>  

                    <td>6</td>  

                    <td>7</td>  

                    <td>8</td>  

                    <td style="width:240px;">

                        <a id="addBtn" class="optLink" href="javascript:;"/>추가</a>

                    </td>   

                </tr>

            </table>

        </p>

        <script type="text/javascript" src="js/jquery.js"> </script>

        <script type="text/javascript" src="js/app.js"> </script>

    </body></html>

3. JS코드: app.js

$(function(){

    var g_table = $("table.data");//전역 변수 정의, HTML 테이블 찾기

    var init_data_url = "data.php?action=init_data_list";

    $.get(init_data_url,function(data){

        var row_items = $.parseJSON(data);//json 데이터를 json 배열 개체로 변환합니다

        //js 사이클링

        for(var i = 0 , j = row_items.length ; i < j ; i++){            

        var data_dom = create_row(row_items[i]);

            g_table.append(data_dom);

        }

    });    //라인 레코드 생성하기

    function create_row(data_item){

        var row_obj = $("<tr></tr>");        

        for(var k in data_item){            

        if("id" != k){//반환된 필드의 아이디 제거

                var col_td = $("<td></td>");

                col_td.html(data_item[k]);//col_td에 내용 쓰기

                row_obj.append(col_td);//DOM 추가

            }

        }        //사용자 정의 단추

        var delButton = $('<a class="optLink" href="javascript:;">삭제 & nbsp;</a>');//삭제 단추

        delButton.attr("dataid",data_item['id']);//단추에 dataid 속성 추가

        delButton.click(delHandler);//단추에 클릭 이벤트 추가

        var editButton = $('<a class="optLink" href="javascript:;">편집</a>');//편집 단추

        editButton.attr("dataid",data_item['id']);

        editButton.click(editHandler);        //추가 작업 열

        var opt_td = $('<td></td>');

        opt_td.append(delButton);

        opt_td.append(editButton);

        row_obj.append(opt_td);        return row_obj;

    }    //액션 열의 삭제 이벤트

    function delHandler(){

        var data_id = $(this).attr("dataid");//삭제된 dataid 값 가져오기，$(this)클릭하신 이 button을 가리킵니다

        var meButton = $(this);//단추 변수

        $.post("data.php?action=del_row",{dataid:data_id},function(res){

            if(res == "ok"){

                $(meButton).parent().parent().remove();//행 레코드 삭제

            }else{

                alert(res);

            }

        });

    }    //행 레코드 추가

    $("#addBtn").click(function(){

        var addRow = $("<tr></tr>");        //여덟 개의 텍스트 상자

        for(var i=0;i<8;i++){           

         var col_td = $("<td><input type='text' class='txtField'/></td>");

            addRow.append(col_td);

        }        //조작 열

        var col_opt = $("<td></td>");        

        var confirmBtn = $("<a href='javascript:;' class='optLink'>확인하다&nbsp;</a>");

        confirmBtn.click(function(){//확인 작업

            var currentRow = $(this).parent().parent();//tr

            var input_fields = currentRow.find("input");           

             var post_fields = {};//데이터 개체 보내기

            for(var i=0,j=input_fields.length;i<j;i++){

                post_fields['col_' + i] = input_fields[i].value;

            }

            $.post("data.php?action=add_row",post_fields,function(res){

                if(0 < res){

                    post_fields['id'] = res;                    

                    var postAddRow = create_row(post_fields);

                    currentRow.replaceWith(postAddRow);

                }else{

                    alert(res);

                }

            });

        });        

        var cancelBtn = $("<a href='javascript:;' class='optLink'>취소</a>");

        cancelBtn.click(function(){//작업 삭제，행 직접 삭제 취소

            $(this).parent().parent().remove();

        });

 

 

        col_opt.append(confirmBtn);

        col_opt.append(cancelBtn);

        addRow.append(col_opt);

 

        g_table.append(addRow);

    });    //행 기록 편집

    function editHandler(){

        var data_id = $(this).attr("dataid");        

        var meButton = $(this);        

        var meRow = $(this).parent().parent();//이벤트 없음

        var editRow = $("<tr></tr>");       

         for(var i=0;i<8;i++){            

         var editTd = $("<td><input type='text' class='txtField'/></td>");            

         var v = meRow.find('td:eq(' + i +')').html();

            editTd.find('input').val(v);

            editRow.append(editTd);

        }        //조작 열

        var opt_td = $("<td></td>");        

        var saveButton = $("<a href='javascript:;' class='optLink'>저장하다&nbsp;</a>");

        saveButton.click(function(){

            var currentRow = $(this).parent().parent();            

            var input_fields = currentRow.find("input");           

             var post_fields = {};            

             for(var i=0,j=input_fields.length;i<j;i++){

                post_fields['col_' + i] = input_fields[i].value;

            }

            post_fields['id'] = data_id;

            $.post("data.php?action=edit_row",post_fields,function(res){

                if(res == 'ok'){                    

                var newUpdateRow = create_row(post_fields);

                    currentRow.replaceWith(newUpdateRow);

                }else{

                    alert(res);

                }

            });

        });       

         var cancleButton = $("<a href='javascript:;' class='optLink'>취소</a>")

        cancleButton.click(function(){

            var currentRow = $(this).parent().parent();//현재 줄

            meRow.find('a:eq(0)').click(delHandler);//새로 교체된 행에 클릭 이벤트가 없습니다. 클릭 이벤트를 다시 부여해야 합니다

            meRow.find('a:eq(1)').click(editHandler);

            currentRow.replaceWith(meRow);//meRow이전 직업으로

        });

 

        opt_td.append(saveButton);

        opt_td.append(cancleButton);

        editRow.append(opt_td);

        meRow.replaceWith(editRow);

    }    //인쇄 출력 디버깅

    function debug(res){

        console.log(res);

    }

});

4,PHP코드:data.php

<?php

//라우팅

$action = $_GET['action'];

switch($action){    

case 'init_data_list':

    init_data_list();    

    break;    

    case 'add_row':

    add_row();    

    break;    

    case 'del_row':

    del_row();    

    break;    

    case 'edit_row':

    edit_row();    

    break;

}//초기화 데이터

function init_data_list(){

    $sql = "SELECT * FROM `et_data` ";//다음 함수의 인자

    $query = query_sql($sql);//사용자 정의 함수에 형 참조가 정의되지 않음

    while ($row = $query->fetch_assoc()) {       

     $data[] = $row;

    }    echo json_encode($data);exit();

 

}//신행기록function add_row(){

    $sql = 'INSERT INTO `et_data` ( `c_a`,`c_b`,`c_c`,`c_d`,`c_e`,`c_f`,`c_g`,`c_h` ) VALUES ( ';    

    for($i = 0;$i<8;$i++){        

    $sql .= '\'' . $_POST['col_' . $i] . '\',';

    }    $sql = trim($sql,',');    $sql .= ')';    

    $lastInsertId = "SELECT LAST_INSERT_ID() AS LD";    

    if($res = query_sql($sql,$lastInsertId)){        

    $d = $res->fetch_assoc();        

    echo $d['LD'];exit();

    }else{        

    echo "db error...";exit();

    }

}//행 레코드 삭제

function del_row(){

    $dataid = $_POST['dataid'];    

    $sql = "DELETE FROM `et_data` where `id` = " . $dataid;    

    if(query_sql($sql)){        

    echo "ok";exit();

    }else{        

    echo "db error...";exit();

    }

}//행 기록 편집

function edit_row(){

    $sql = "UPDATE     `et_data` SET ";    

    $id = $_POST['id'];    

    unset($_POST['id']);    

    for($i=0;$i<8;$i++){       

     $sql .= '`c_'.chr(97 + $i) . '` = \''.$_POST['col_' . $i] . ' \','; 

    }    

    $sql = trim($sql,',');    

    $sql .= ' WHERE `id` = ' . $id;    

    if(query_sql($sql)){        

    echo "ok";exit();

    }else{        

    echo "db error...";exit();

    }

}//데이터베이스 조회function query_sql(){

    $mysqli = new mysqli('127.0.0.1','root','root','etable');    

    $sqls = func_get_args();//함수의 모든 인자 가져오기

    foreach ($sqls as $key => $value) {       

     $query = $mysqli->query($value);

    }    

    $mysqli->close();    

    return $query;

}
반응형
저작자표시

'개발 꿀팁 > PHP' 카테고리의 다른 글

PHP 배열 필터 null 값 array_filter  (0) 2022.07.26
php 조작 redis의 상용 방법은 어떤 것이 있습니까?php조작레디스방법정리(코드첨부)  (0) 2022.07.26
Thinkphp 업로드 클래스 이미지 업로드를 위한 코드  (0) 2022.07.25
php 구현은 혼합 인증 코드와 이미지 인증 코드를 생성하고 테스트한다(코드)  (0) 2022.07.25
TP5 프레임워크에서 재귀적 무한 등급 구현 방법  (0) 2022.07.25

'개발 꿀팁/PHP'의 다른글

  • 현재글php와 ajax는 어떻게 표의 실시간 편집이 가능합니까(코드 첨부)

관련글

티스토리툴바