この例は、次のシナリオに適用できます。ユーザーの詳細などの詳細情報を表示し、フィールド情報の一部を変更する必要があることがわかった場合、フィールドの内容を直接クリックして変更できるため、ユーザーの時間を節約できます。 (従来の方法では、エディター ページに入り、フィールドの内容を 1 つまたは 2 つだけ編集する必要がある場合でも、すべての編集済みフィールド情報をリストし、[送信] をクリックします)。Web の応答速度が向上し、フロントエンド ユーザーの操作性が向上します。経験。
この例は jquery ライブラリに依存しており、次の機能を備えたプラグインに基づいています:
リアルタイム編集、バックグラウンドでのリアルタイム応答、即時の部分更新。
入力フォームのタイプはカスタマイズできます。現在、jeditable には text、select、および textarea のタイプが用意されています。
キーボードの Enter キーと ESC キーに応答します。
プラグイン メカニズム。この例では、jquery ui の datepicker カレンダー コントロールとの統合を提供します。
以下では、実装プロセスをステップごとに説明します。
XHTML
次のようにフォームを作成する必要があります:
<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>
これはユーザー情報のテーブルです。コードから、応答フィールド情報の 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 に関しては、ページの
<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="loader.gif">',
tooltip : '单击可以编辑...'
});
});
プラグインは多くの属性とメソッド呼び出しを提供します。ボタンの幅、高さ、テキスト情報、送信時の画像の読み込み、マウスをスライドさせたときのプロンプト情報などを設定できます。 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 データの生成方法を確認してください。もう 1 つの方法は、編集可能ファイルでデータを直接指定することです:
$('.edit_select').editable('save.php', {
data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}",
type : "select",
});
上記のコード内のデータが実際には json データの文字列であることを見つけるのは難しくありません。
textarea タイプはもはや多数派ではなくなり、type タイプを textarea に変更するだけです。 PS: デフォルトのタイプはテキストです。
日付型を扱うときは、jquery ui カレンダー プラグインを接続しました。もちろん、juqery ui プラグインとスタイルを導入することを忘れないでください。
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <script type="text/javascript" src="js/jquery-ui.js"></script>
$.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").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(emptyempty($val)){
echo "不能为空";
}else{
//更新字段信息
$query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");
if($query){
echo $val;
}else{
echo "数据出错";
}
}
これで編集可能なフォームが完成しました。ただし、まだ完了していませんので、入力情報の妥当性の検証については今後記事を添付していきますので、お楽しみに。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
