Dieses Beispiel ist auf das Szenario anwendbar: Wenn Sie detaillierte Informationen wie Benutzerdetails anzeigen und feststellen, dass einige der Feldinformationen geändert werden müssen, können Sie direkt auf den Feldinhalt klicken, um ihn zu ändern, wodurch dem Benutzer Zeit gespart wird (Die herkömmliche Methode besteht darin, eine Editorseite aufzurufen, alle bearbeiteten Feldinformationen aufzulisten, auch wenn nur ein oder zwei Feldinhalte bearbeitet werden müssen, und dann auf „Senden“ zu klicken.) Dadurch wird die WEB-Reaktionsgeschwindigkeit verbessert, wodurch der Front-End-Benutzer verbessert wird Erfahrung.
Dieses Beispiel basiert auf der JQuery-Bibliothek und basiert auf Plug-Ins mit den folgenden Funktionen:
Bearbeitung in Echtzeit, Reaktion in Echtzeit im Hintergrund und sofortige Teilaktualisierung.
Der Eingabeformulartyp kann angepasst werden. Derzeit bietet jeditable die Typen Text, Select und Textarea.
Reagieren Sie auf die Eingabe- und ESC-Tasten der Tastatur.
Plug-in-Mechanismus, dieses Beispiel ermöglicht die Integration mit der Datepicker-Kalendersteuerung von jquery ui.
Im Folgenden erklären wir Ihnen den Implementierungsprozess Schritt für Schritt.
XHTML
Wir müssen ein Formular wie folgt erstellen:
<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>
Dies ist eine Tabelle mit Benutzerinformationen. Dem Code können Sie entnehmen, dass dem td der Antwortfeldinformationen ein Klassen- und ein ID-Attribut zugewiesen und ein Wert zugewiesen wird. Es ist erwähnenswert, dass der ID-Wert, der td in der Tabelle entspricht, eins zu eins mit dem Feldnamen in der Datenbank übereinstimmt. Dies geschieht, damit der Hintergrund während der Bearbeitung die entsprechenden Feldinformationen erhalten kann, die im Folgenden erläutert werden PHP-Code später.
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 rendert den Tischstil, um den Tisch komfortabler aussehen zu lassen.
jQuery
Wenn es um JQuery geht, müssen Sie daran denken, JQuery und Jeditable Plug-Ins
zwischen dem
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jeditable.js"></script>
Dann starten Sie den Aufruf des Plug-Ins.
$(function(){
$('.edit').editable('save.php', {
width :120,
height :18,
//onblur : 'ignore',
cancel : '取消',
submit : '确定',
indicator : '<img src="loader.gif">',
tooltip : '单击可以编辑...'
});
});
Das Plug-in bietet viele Attribute und Methodenaufrufe. Sie können die Breite, Höhe, Textinformationen der Schaltfläche, das Laden des Bildes beim Senden, Eingabeaufforderungsinformationen beim Überfahren mit der Maus usw. festlegen. save.php ist die Adresse des Hintergrundprogramms, an das die bearbeiteten Informationen schließlich übermittelt werden. Prüfen Sie nun, ob die Informationen in der Tabelle bearbeitet werden können.
Jeditable bietet auch die Bearbeitung ausgewählter Textfeldtypen und eine Plug-in-API-Schnittstelle.
Schauen wir uns die Verarbeitung der Dropdown-Auswahlbox-Auswahl an:
$('.edit_select').editable('save.php', {
loadurl : 'json.php',
type : "select",
});
type gibt den ausgewählten Typ an. Die in select geladenen Daten stammen von json.php. json.php stellt die für das Dropdown-Feld erforderliche Datenquelle bereit.
$array['老客户'] = '老客户'; $array['独自开发'] = '独自开发'; $array['合作伙伴'] = '合作伙伴'; $array['公共关系'] = '公共关系'; $array['展览会'] = '展览会'; print json_encode($array);
Diese Daten werden direkt in der Datei json.php gespeichert. Natürlich können Sie die Datenbankinformationen auch auslesen und dann JSON-Daten generieren. Eine andere Methode besteht darin, Daten direkt im bearbeitbaren Feld anzugeben:
$('.edit_select').editable('save.php', {
data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}",
type : "select",
});
Es ist nicht schwer herauszufinden, dass es sich bei den Daten im obigen Code tatsächlich um eine Zeichenfolge von JSON-Daten handelt.
Der Textarea-Typ ist nicht mehr die Mehrheit, ändern Sie einfach den Typtyp in Textarea. PS: Der Standardtyp ist Text.
Beim Umgang mit Datumstypen habe ich ein JQuery-UI-Kalender-Plug-In angeschlossen. Vergessen Sie natürlich nicht, das Juqery-UI-Plug-In und den Stil einzuführen:
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <script type="text/javascript" src="js/jquery-ui.js"></script>
Stellen Sie eine Verbindung zum Datepicker-Kalender-Plug-in von jquery ui her
$.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();
}
});
Der aufrufende Code kann den Typ direkt als Datepicker angeben.
$(".datepicker").editable('save.php', {
width : 120,
type : 'datepicker',
onblur : "ignore",
});
Prüfen Sie nun, ob das Datum im Feld „Begrenzter Zeitraum“ im Formular geändert werden kann. Nun, es warten noch viele andere Plug-ins auf Ihren Beitritt.
PHP
Die bearbeiteten Feldinformationen werden zur Verarbeitung an das Hintergrundprogramm save.php gesendet. Die Arbeit, die save.php erledigen muss, besteht darin, die vom Front-End übermittelten Feldinformationsdaten zu empfangen, die erforderliche Filterung und Überprüfung durchzuführen, dann den entsprechenden Feldinhalt in der Datentabelle zu aktualisieren und die Ergebnisse zurückzugeben.
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 "数据出错";
}
}
Gehen Sie zurück zum HTML-Code am Anfang. Die in der Tabelle angezeigten Feldinhaltsinformationen werden natürlich aus der Datenbank gelesen. Sie müssen daher PHP verwenden, um die Datentabelle zu lesen und den Inhalt anzuzeigen selbst verarbeiten.
Damit ist das bearbeitbare Formular abgeschlossen. Aber es ist noch nicht fertig. Ich werde weitere Artikel zur Überprüfung der Gültigkeit der eingegebenen Informationen anhängen, also bleiben Sie dran.
Ich hoffe, dass jeder vom Herausgeber zusammengestellte Artikel für alle hilfreich ist.
