検索

ホームページ >バックエンド開発 >PHPチュートリアル >phpとajaxを使用してテーブルのリアルタイム編集を実装する方法（コードは添付されています）

phpとajaxを使用してテーブルのリアルタイム編集を実装する方法（コードは添付されています）

不言
不言オリジナル
2018-08-18 17:29:363011ブラウズ

この記事の内容は、php と ajax を使用してテーブルのリアルタイム編集を実装する方法 (コード付き) です。一定の参考価値があります。必要な友人は参照してください。お役に立てば幸いです。 。

AJAX 使用シナリオ

  • コンテンツ データのフィルタリング非同期検索 (キーワード検索)

  • フォームの非同期検証 (フォーム送信の検証)

  • コンテンツ データの非同期読み込み (コンテンツの追加)

  • データ ロジック処理

AJAX 機能

  • 現在のページを更新せずにサーバーとの非同期対話を行う

  • ブラウザとサーバー間のデータ送信を最適化し、不要なデータのラウンドを削減します。旅行

  • #データの一部をクライアントに転送し、サーバーへの負荷を軽減します

    • #AJAX アイデアの実装の基本

    ニーズに応じて JavaScript クラス ライブラリを選択してください

  • ##JavaScript 部分はサーバーにデータを送信します

  • ## PHP渡されたデータを受け取り、データを処理して JavaScript に返します

  • JavaScript は PHP からデータを受け取り、それに応じて処理します

  • 基礎知識

フロントエンドの側面: html css javascript jquery json

  • サーバーの側面: php apache (nginx)

  • ## データベース: mysql sql

  • 学習目標

php と javascript 間の非同期対話を学習する

  • Ajax コードの動作構造と基本原則を理解する

  • JavaScript コードの明確なレイアウト

  • レンダリング

#コードの実装

#基本的なデータ テーブルの作成phpと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=>行を生成

  • データを追加する前にフロントエンド構造を構築します

  • 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){//去除返回字段中的id
                var col_td = $("<td></td>");
                col_td.html(data_item[k]);//给col_td写入内容
                row_obj.append(col_td);//追加DOM
            }
        }        //自定义按钮
        var delButton = $(&#39;<a class="optLink" href="javascript:;">删除 </a>&#39;);//删除按钮
        delButton.attr("dataid",data_item[&#39;id&#39;]);//给按钮添加dataid属性
        delButton.click(delHandler);//给按钮添加点击事件
        var editButton = $(&#39;<a class="optLink" href="javascript:;">编辑</a>&#39;);//编辑按钮
        editButton.attr("dataid",data_item[&#39;id&#39;]);
        editButton.click(editHandler);        //追加操作列
        var opt_td = $(&#39;<td></td>&#39;);
        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=&#39;text&#39; class=&#39;txtField&#39;/></td>");
            addRow.append(col_td);
        }        //操作列
        var col_opt = $("<td></td>");        
        var confirmBtn = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>确认 </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[&#39;col_&#39; + i] = input_fields[i].value;
            }
            $.post("data.php?action=add_row",post_fields,function(res){
                if(0 < res){
                    post_fields[&#39;id&#39;] = res;                    
                    var postAddRow = create_row(post_fields);
                    currentRow.replaceWith(postAddRow);
                }else{
                    alert(res);
                }
            });
        });        
        var cancelBtn = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>取消</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=&#39;text&#39; class=&#39;txtField&#39;/></td>");            
         var v = meRow.find(&#39;td:eq(&#39; + i +&#39;)&#39;).html();
            editTd.find(&#39;input&#39;).val(v);
            editRow.append(editTd);
        }        //操作列
        var opt_td = $("<td></td>");        
        var saveButton = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>保存 </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[&#39;col_&#39; + i] = input_fields[i].value;
            }
            post_fields[&#39;id&#39;] = data_id;
            $.post("data.php?action=edit_row",post_fields,function(res){
                if(res == &#39;ok&#39;){                    
                var newUpdateRow = create_row(post_fields);
                    currentRow.replaceWith(newUpdateRow);
                }else{
                    alert(res);
                }
            });
        });       
         var cancleButton = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>取消</a>")
        cancleButton.click(function(){
            var currentRow = $(this).parent().parent();//当前行
            meRow.find(&#39;a:eq(0)&#39;).click(delHandler);//新替换的行没有点击事件，需要重新赋予点击事件
            meRow.find(&#39;a:eq(1)&#39;).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[&#39;action&#39;];
switch($action){    
case &#39;init_data_list&#39;:
    init_data_list();    
    break;    
    case &#39;add_row&#39;:
    add_row();    
    break;    
    case &#39;del_row&#39;:
    del_row();    
    break;    
    case &#39;edit_row&#39;:
    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 = &#39;INSERT INTO `et_data` ( `c_a`,`c_b`,`c_c`,`c_d`,`c_e`,`c_f`,`c_g`,`c_h` ) VALUES ( &#39;;    
    for($i = 0;$i<8;$i++){        
    $sql .= &#39;\&#39;&#39; . $_POST[&#39;col_&#39; . $i] . &#39;\&#39;,&#39;;
    }    $sql = trim($sql,&#39;,&#39;);    $sql .= &#39;)&#39;;    
    $lastInsertId = "SELECT LAST_INSERT_ID() AS LD";    
    if($res = query_sql($sql,$lastInsertId)){        
    $d = $res->fetch_assoc();        
    echo $d[&#39;LD&#39;];exit();
    }else{        
    echo "db error...";exit();
    }
}//删除行记录
function del_row(){
    $dataid = $_POST[&#39;dataid&#39;];    
    $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[&#39;id&#39;];    
    unset($_POST[&#39;id&#39;]);    
    for($i=0;$i<8;$i++){       
     $sql .= &#39;`c_&#39;.chr(97 + $i) . &#39;` = \&#39;&#39;.$_POST[&#39;col_&#39; . $i] . &#39; \&#39;,&#39;; 
    }    
    $sql = trim($sql,&#39;,&#39;);    
    $sql .= &#39; WHERE `id` = &#39; . $id;    
    if(query_sql($sql)){        
    echo "ok";exit();
    }else{        
    echo "db error...";exit();
    }
}//数据库查询function query_sql(){
    $mysqli = new mysqli(&#39;127.0.0.1&#39;,&#39;root&#39;,&#39;root&#39;,&#39;etable&#39;);    
    $sqls = func_get_args();//获取函数的所有参数
    foreach ($sqls as $key => $value) {       
     $query = $mysqli->query($value);
    }    
    $mysqli->close();    
    return $query;
}

    ソース コード リンク: https://pan. baidu.com/s/1fAinVXU-nWt7ODgrWoNRIg パスワード: n5yr

    • 関連推奨事項:

メンバー アカウントのみのログインを実装するための PHP コード例

#ファイルエクスポート時のphpExcelのメモリオーバーフローの解決方法

以上がphpとajaxを使用してテーブルのリアルタイム編集を実装する方法（コードは添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript sql mysql nginx json jquery css ajax html JS 事件 异步 数据库 apache https ui
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：メンバーアカウントが一意にのみログインできることを理解するための PHP コード例次の記事：メンバーアカウントが一意にのみログインできることを理解するための PHP コード例

関連記事

続きを見る