?
この例では、jQuery を使用して、ワンクリックでテキスト メッセージを編集可能なフォームに変換します。テキスト コンテンツを編集して [OK] ボタンをクリックすると、新しいコンテンツがバックグラウンドの PHP に送信されます。プログラムを処理してデータベースに保存します。「キャンセル」ボタンをクリックすると、ページは初期状態に戻ります。
?
この例は、次のシナリオに適用できます。ユーザーの詳細などの詳細情報を表示し、フィールド情報の一部を変更する必要があることがわかった場合、フィールドの内容を直接クリックして変更できるため、ユーザーの時間を節約できます。 (従来の方法では、エディター ページに入り、フィールドの内容を 1 つまたは 2 つだけ編集する必要がある場合でも、すべての編集済みフィールド情報をリストし、[送信] をクリックします)。Web の応答速度が向上し、フロントエンド ユーザーの操作性が向上します。経験。
?
この例は jquery ライブラリに依存しており、次の特徴を持つ jeditable プラグインに基づいています:
- リアルタイム編集、バックグラウンドでのリアルタイム応答、即時の部分更新。
- 入力フォームのタイプはカスタマイズできます。現在、jeditable には text、select、および textarea のタイプが用意されています。
- キーボードの Enter キーと ESC キーに応答します。
- プラグイン メカニズム。この例では、jquery ui の datepicker カレンダー コントロールとの統合を提供します。
実装プロセスをステップごとに説明しましょう。
?
XHTML
次のようにフォームを作成する必要があります:
| 客户信息 | |||
| 姓名 | 李小三 | 办公电话 | 021-12345678 |
| 称谓 | 先生 | 手机 | 13800138000 |
| 公司名称 | 常丰集团 | 电子邮箱 | lrfbeyond@163.com |
| 潜在客户来源 | 公共关系 | 有限期 | 2011-11-30 |
| 职位 | 部门经理 | 网站 | www.helloweba.com |
| 创建时间 | 2010-11-04 21:11:59 | 修改时间 | 2010-11-05 09:42:52 |
| 备注 | 备注信息 | ||
?
これはユーザー情報のテーブルです。コードから、応答フィールド情報の td に class 属性と id 属性が与えられ、値が割り当てられていることがわかります。テーブル内の td に対応する id 値は、データベース内のフィールド名と 1 対 1 に対応していることに注意してください。これは、編集中にバックグラウンドで対応するフィールド情報を取得できるようにするために行われます。これについては、「」で説明します。 PHPコードは後ほど。
?
CSS
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; }
?
CSS はテーブルの見た目をより快適にするためにテーブル スタイルをレンダリングします。
?
jQuery
jquery に関しては、ページの
の間に jquery と jeditable プラグインを引用することを忘れないでください。<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jeditable.js"></script>
?
次に、プラグインの呼び出しを開始します。
$(function(){
$('.edit').editable('save.php', {
width :120,
height :18,
//onblur : 'ignore',
cancel : '取消',
submit : '确定',
indicator : '<img src="/static/imghwm/default1.png" data-src="loader.gif" class="lazy" alt="編集可能なテーブル: jQuery PHP により、テーブル フィールドの内容をリアルタイムで編集できます。" >',
tooltip : '单击可以编辑...'
});
});
?
jeditable プラグインは、多くの属性とメソッド呼び出しを提供します。ボタンの幅、高さ、テキスト情報、送信時の画像の読み込み、マウスをスライドさせたときのプロンプト情報などを設定できます。 save.php は、編集した情報が最終的に送信されるバックグラウンド プログラムのアドレスです。次に、テーブル内の情報が編集できるかどうかを確認します。
?
Jeditable は、選択、テキストエリア タイプの編集も提供し、プラグイン API インターフェイスも提供します。ドロップダウン選択ボックスの選択の処理を見てみましょう:
$('.edit_select').editable('save.php', {
loadurl : 'json.php',
type : "select",
});
?
type は選択タイプを指定します。select にロードされるデータは json.php から取得されます。json.php はドロップダウン ボックスに必要なデータ ソースを提供します。
$array['老客户'] = '老客户'; $array['独自开发'] = '独自开发'; $array['合作伙伴'] = '合作伙伴'; $array['公共关系'] = '公共关系'; $array['展览会'] = '展览会'; print json_encode($array);
?
これらのデータは json.php ファイルに直接保存されます。もちろん、データベース情報を読み取って json データを生成することもできます。json データの生成方法については、PHP での JSON のアプリケーションを参照してください。もう 1 つの方法は、編集可能ファイルでデータを直接指定することです:
$('.edit_select').editable('save.php', {
data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}",
type : "select",
});
?
上記のコード内のデータが実際には json データの文字列であることを見つけるのは難しくありません。
textarea タイプはもはや大多数ではありません。type タイプを textarea に変更するだけです。 PS: デフォルトのタイプはテキストです。
日付型を扱うときは、jquery ui datepicker カレンダー プラグインを接続しました。もちろん、juqery ui プラグインとスタイルを導入することを忘れないでください。
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <script type="text/javascript" src="js/jquery-ui.js"></script>?
jquery ui の 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();
}
});?呼び出しコードでは、タイプを datepicker として直接指定できます。
$(".datepicker").editable('save.php', {
width : 120,
type : 'datepicker',
onblur : "ignore",
}); ?次に、フォームの「期間限定」フィールドの日付を変更できるかどうかを確認します。そうですね、さらに多くのプラグイン接続があなたの参加を待っています。
?
PHP
編集されたフィールド情報は、処理のためにバックグラウンド プログラム save.php プログラムに送信されます。 save.php が完了する必要がある作業は、フロントエンドによって送信されたフィールド情報データを受信し、必要なフィルタリングと検証を実行してから、データ テーブル内の対応するフィールドの内容を更新し、結果を返すことです。
include_once("connect.php"); //连接数据库
$field=$_POST['id']; //获取前端提交的字段名
$val=$_POST['value']; //获取前端提交的字段对应的内容
$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容
$time=date("Y-m-d H:i:s"); //获取系统当前时间
if(empty($val)){
echo "不能为空";
}else{
//更新字段信息
$query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");
if($query){
echo $val;
}else{
echo "数据出错";
}
} ?冒頭のHTMLコードに戻ります。テーブルに表示されるフィールドの内容情報は当然データベースから読み込まれますので、PHPを使用してデータテーブルを読み込んで内容を詳細に記述することができます。自分で処理してください。
?
これで編集可能なフォームは完成です。まだ完成ではありませんが、入力情報の妥当性を検証中ですので、今後も順次記事を添付していきますので、お友達の参加をお待ちしております。
?
出典: helloweba.com :? http://www.helloweba.com/view-search-74.html
?
参考:
1. http://www.appelsiini.net/projects/jeditable
2. http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
3. http://blog.yoren.info/2008/05/jquery - jeditable を使用して mysql データを迅速に更新します/
?
?
?
?
