jQuery+PHPはテーブルを編集して保存するメソッドを実装します

今回は jQuery+PHP でテーブルを編集して保存する方法を紹介します。 jQuery+PHP でテーブルを編集して保存する方法の注意点は次のとおりです。 この例では、jQuery を使用して、ワンクリックでテキスト メッセージを編集可能なフォームに変換します。テキスト コンテンツを編集して [OK] ボタンをクリックすると、新しいコンテンツがバックグラウンドの PHP プログラムに送信されます。処理のためにそれをデータベースに保存します。「キャンセル」ボタンをクリックすると、ページは初期状態に戻ります。この例に適用されるシナリオ: 詳細情報を表示するとき。ユーザーの詳細など、特定のフィールド情報が見つかった場合は、フィールドの内容を直接クリックして変更できるため、ユーザーの時間を節約できます (従来の方法では、編集ページに入り、編集されたすべてのフィールド情報をリストします)。フィールドの内容を 1 つまたは 2 つ編集して [送信] をクリックするだけでよい場合でも、Web の応答速度が向上し、フロントエンドのユーザー エクスペリエンスが向上します。

この例は jquery ライブラリに依存しており、プラグインに基づいています:

リアルタイム編集、バックグラウンドでのリアルタイム応答、即時の部分更新。

入力フォームのタイプは現在カスタマイズできます。jeditable では、text、select、および textarea のタイプが提供されます。 キーボードの Enter キーと ESC キーに応答します。 プラグイン メカニズム。この例では、jquery ui の datepicker カレンダー コントロールとの統合を提供します。
実装プロセスをステップごとに説明しましょう。

テーブル内の td に対応する id 値は、データベース内のフィールド名と 1 対 1 に対応していることに注意してください。これは、編集中にバックグラウンドで対応するフィールド情報を取得できるようにするために行われます。これについては、「」で説明します。 PHPコードは後ほど。

CSS

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <thead> 
  <tr class="table_title"> 
   <td colspan="4"><span class="open"></span>客户信息</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td width="20%" class="table_label">姓名</td> 
   <td width="30%" class="edit" id="username">李小三</td> 
   <td width="20%" class="table_label">办公电话</td> 
   <td width="30%" class="edit" id="phone">021-12345678</td> 
  </tr> 
  <tr> 
   <td class="table_label">称谓</td> 
   <td class="edit" id="solutation">先生</td> 
   <td class="table_label">手机</td> 
   <td class="edit" id="mobile">13800138000</td> 
  </tr> 
  <tr> 
   <td class="table_label">公司名称</td> 
   <td class="edit" id="company">常丰集团</td> 
   <td class="table_label">电子邮箱</td> 
   <td class="edit" id="email">lrfbeyond@163.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">潜在客户来源</td> 
   <td class="edit_select" id="source">公共关系</td> 
   <td class="table_label">有限期</td> 
   <td class="datepicker" id="sdate">2011-11-30</td> 
  </tr> 
  <tr> 
   <td class="table_label">职位</td> 
   <td class="edit" id="job">部门经理</td> 
   <td class="table_label">网站</td> 
   <td class="edit" id="web">www.helloweba.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">创建时间</td> 
   <td>2010-11-04 21:11:59</td> 
   <td class="table_label">修改时间</td> 
   <td id="modifiedtime">2010-11-05 09:42:52</td> 
  </tr> 
  <tr> 
   <td class="table_label">备注</td> 
   <td class="textarea" id="note" colspan="3">备注信息</td> 
  </tr> 
 </tbody> 
</table>

CSS は、テーブルをより快適に見せるためにテーブル スタイルをレンダリングします。

jQuery
jquery に関しては、必ずページ

table{width:96%; margin:20px auto; border-collapse:collapse;} 
table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;} 
.table_title{height:26px; line-height:26px; background:url(btn_bg.gif) repeat-x bottom; 
 font-weight:bold; text-indent:.3em; outline:0;} 
.table_label{background:#e8f5fe; text-align:right; }

の の間に jquery と jeditable プラグインを引用してから、プラグインの呼び出しを開始してください。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script><br>このプラグインは、多くの <strong>プロパティとメソッド</strong>呼び出しを提供します。ボタンの幅、高さ、テキスト情報、送信時の画像の読み込み、マウスをスライドさせたときのプロンプト情報などを設定できます。 save.php は、編集した情報が最終的に送信されるバックグラウンド プログラムのアドレスです。次に、テーブル内の情報が編集できるかどうかを確認します。 <br>Jeditable は、選択、テキストエリア タイプの編集も提供し、プラグイン API インターフェイスも提供します。 ドロップダウン選択ボックス select の処理を​​見てみましょう: <p style="text-align: left;"></p>
<pre class="brush:php;toolbar:false">$(function(){ 
   $('.edit').editable('save.php', { 
     width   :120, 
     height  :18, 
     //onblur  : 'ignore', 
     cancel  : '取消', 
     submit  : '确定', 
     indicator : '<img src="loader.gif">', 
     tooltip  : '单击可以编辑...' 
   }); 
});

type は選択タイプを指定します。select にロードされるデータは json.php から取得され、json.php はドロップダウンに必要なデータ ソースを提供します。箱。

$('.edit_select').editable('save.php', { 
  loadurl  : 'json.php', 
  type   : "select", 
});

これらのデータはjson.phpファイルに直接保存されています。もちろん、データベースの情報を読み込んでjsonデータを生成することもできます。jsonデータの生成方法については、こちらをご覧ください。もう 1 つの方法は、編集可能ファイルでデータを直接指定することです:

$array['老客户'] = '老客户'; 
$array['独自开发'] = '独自开发'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共关系'] = '公共关系'; 
$array['展览会'] = '展览会'; 
print json_encode($array);

実際、上記のコード内のデータが JSON データの文字列であることを見つけるのは難しくありません。
textarea タイプはもはや大多数ではありません。type タイプを textarea に変更するだけです。 PS: デフォルトのタイプはテキストです。 日付型を扱うときは、jquery ui カレンダー プラグインを接続しました。もちろん、juqery ui プラグインとスタイルを導入することを忘れないでください:

$('.edit_select').editable('save.php', { 
  data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}", 
  type : "select", 
});

jquery ui datepicker カレンダー プラグインに接続します

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
<script type="text/javascript" src="js/jquery-ui.js"></script>

呼び出しコードは型を直接指定します。型は datepicker です。

$.editable.addInputType('datepicker', { 
  element : function(settings, original) { 
    var input = $('<input class="input" />'); 
    input.attr("readonly","readonly"); 
    $(this).append(input); 
    return(input); 
  }, 
  plugin : function(settings, original) { 
    var form = this; 
    $("input",this).datepicker(); 
  } 
});

それでは、フォームの「期間限定」フィールドの日付を変更できるかどうかを見てみましょう。そうですね、さらに多くのプラグイン接続があなたの参加を待っています。
PHP

編集されたフィールド情報は、処理のためにバックグラウンドプログラムsave.phpプログラムに送信されます。 save.php が完了する必要がある作業は、フロントエンドによって送信されたフィールド情報データを受信し、必要なフィルタリングと検証を実行してから、データ テーブル内の対応するフィールドの内容を更新し、結果を返すことです。

$(".datepicker").editable('save.php', { 
  width   : 120, 
  type   : 'datepicker', 
  onblur  : "ignore", 
});

冒頭のHTMLコードに戻ります。テーブルに表示されるフィールドの内容情報は、当然データベースから読み込まれますので、PHPを使用してデータテーブルを読み込んで内容を表示することができます。自分で処理してください。

これで編集可能なフォームは完了です。ただし、まだ完了していませんので、入力情報の有効性の検証については今後記事を添付しますので、お楽しみに。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:

jQueryでTableを操作する方法のまとめ

jQueryでテーブルの行を動的に操作する

jQueryでHTMLのテーブルに動的に行を追加する方法のまとめ

以上がjQuery+PHPはテーブルを編集して保存するメソッドを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。