jQuery+PHP implementiert die Methode zum Bearbeiten und Speichern von Tabellen

Dieses Mal zeige ich Ihnen die jQuery+PHP-Methode zum Bearbeiten und Speichern einer Tabelle. Welche Vorsichtsmaßnahmen gibt es für die jQuery+PHP-Methode zum Bearbeiten und Speichern einer Tabelle? Werfen wir einen Blick darauf. In diesem Beispiel verwenden wir jQuery, um eine Textnachricht in ein bearbeitbares Formular umzuwandeln, indem wir darauf klicken. Sie können den Textinhalt bearbeiten und dann auf die Schaltfläche „OK“ klicken. Der neue Inhalt wird angezeigt gesendet an Das PHP-Hintergrundprogramm verarbeitet es und speichert es in der Datenbank. Wenn Sie auf die Schaltfläche „Abbrechen“ klicken, kehrt die Seite in den Ausgangszustand zurück.

Dieses Beispiel ist anwendbar Zum Szenario: Wenn Sie beim Anzeigen detaillierter Informationen, z. B. Benutzerdetails, feststellen, dass einige Feldinformationen geändert werden müssen, können Sie direkt auf den Feldinhalt klicken, um ihn zu ändern, wodurch der Benutzer Zeit spart (Die herkömmliche Methode ist). um eine Bearbeitungsseite aufzurufen und alle bearbeiteten Feldinformationen aufzulisten, auch wenn Sie nur eines davon bearbeiten müssen und dann auf „Senden“ klicken), wird die WEB-Antwortgeschwindigkeit verbessert und somit die Front-End-Benutzererfahrung verbessert.

Dieses Beispiel basiert auf der JQuery-Bibliothek und basiert auf Plug-Ins. Es weist die folgenden Eigenschaften auf:

Echtzeitbearbeitung, Echtzeitreaktion im Hintergrund und sofortige Teilaktualisierung. Der Eingabeformulartyp kann angepasst werden. Derzeit bietet jeditable die Typen Text, Auswahl und Textbereich.
Reagiert auf die Eingabe- und ESC-Tasten der Tastatur.
Plug-in-Mechanismus, dieses Beispiel ermöglicht die Integration mit der Datepicker-Kalendersteuerung von jquery ui.
Lassen Sie uns den Implementierungsprozess Schritt für Schritt erklären.

Klassen- und ID-Attribute und Werte zuweisen. 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="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 rendert den Tischstil, damit der Tisch komfortabler aussieht.
jQuery

Wenn es um jquery geht, denken Sie daran, zwischen dem auf jquery und das Jeditable-Plug-in

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; }

zu verweisen und starten Sie dann den Aufruf des Plug-Ins.
Das Plug-in bietet viele

Eigenschafts- und Methodenaufrufe

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script>

. 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.

Sehen wir uns die Verarbeitung der Dropdown-Auswahlbox an:

$(function(){ 
   $('.edit').editable('save.php', { 
     width   :120, 
     height  :18, 
     //onblur  : 'ignore', 
     cancel  : '取消', 
     submit  : '确定', 
     indicator : '<img src="loader.gif">', 
     tooltip  : '单击可以编辑...' 
   }); 
});

Typ gibt den Auswahltyp an. Die in die Auswahl geladenen Daten stammen von json.php, und json.php stellt die bereit Für das Dropdown-Feld erforderliche Datenquelle.

Diese Daten werden direkt in der Datei json.php gespeichert. Natürlich können Sie auch die Datenbankinformationen lesen und dann JSON-Daten generieren. Eine andere Methode besteht darin, Daten direkt in der bearbeitbaren Datei anzugeben:

$('.edit_select').editable('save.php', { 
  loadurl  : 'json.php', 
  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.

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

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:

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

Verbinden Sie die JQuery-UI Datumsauswahl-Kalender-Plug-in

Der aufrufende Code kann den Typ direkt als Datumsauswahl angeben.

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

Nun wollen wir sehen, ob das Datum des Feldes „Begrenzter Zeitraum“ in der Tabelle geändert werden kann. Nun, es warten noch weitere Plug-in-Verbindungen auf Ihren Beitritt.

$.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

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.

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

Gehen Sie zurück zum HTML-Code am Anfang. Die in der Tabelle angezeigten Feldinhaltsinformationen werden natürlich aus der Datenbank gelesen, daher müssen Sie PHP verwenden, um die Datentabelle zu lesen und den Inhalt anzuzeigen . Details Lassen Sie uns den Prozess selbst schreiben. 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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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 "数据出错"; 
  } 
}

Empfohlene Lektüre:

Zusammenfassung der JQuery-Operationstabellenmethode

jquery bearbeitet Tabellenzeilen dynamisch

jQuery gibt eine HTML-Tabelle aus Zusammenfassung des dynamischen Hinzufügens von Zeilenmethoden

Das obige ist der detaillierte Inhalt vonjQuery+PHP implementiert die Methode zum Bearbeiten und Speichern von Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!