JQuery + PHP allows you to edit and save table fields in real time. jquery Fields

JQuery + PHP allows you to edit and save table fields in real time. jquery Fields

This example is applicable to the following scenarios: When you view detailed information, such as user details, and find that the information of a certain field needs to be modified, you can click the content of this field to modify it, saving the user time, (the traditional approach is to enter an editing page to list all the edited field information, even if you only need to edit one or two fields and then click Submit.) This increases the WEB response speed, this improves the front-end user experience.

This example depends on the jquery library and is based on the plug-in. It has the following features:
Real-time editing, real-time response in the background, and real-time partial refresh.
The input form type can be customized. Currently, jeditable provides the text, select, and textarea types.
Return the carriage return and ESC keys of the keyboard.
Plug-in mechanism. This example provides integration with the datepicker calendar control of jquery ui.
Next we will explain the implementation process step by step.
XHTML
Create a table as follows:

<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <thead> <tr class = "table_title"> <td colspan = "4 "> <span class =" open "> </span> Customer Information </td> </tr> </thead> <tbody> <tr> <td width =" 20% "class =" table_label "> name </td> <td width =" 30% "class =" edit "id =" username "> Li xiaosan </td> <td width = "20%" class = "table_label"> office phone number </td> <td width = "30%" class = "edit" id = "phone"> 021-12345678 </td> </tr> <td class = "table_label"> title </td> <td class = "edit" id = "solutation"> SIR </td> <td class = "table_label"> mobile phone </td> <td class = "edit" id = "mobile"> 13800138000 </td> </tr> <td class = "table_label"> company name </td> <td class = "edit" id = "company"> Changfeng group </td> <td class = "table_label"> email </td> <td class = "edit" id = "email"> lrfbeyond@163.com </td> </tr> <td class = "table_label"> potential customer sources </td> <td class = "edit_select" id = "source"> Public Relations </td> <td class = "table_label"> deadline </td> <td class = "datepicker" id = "sdate"> 2011-11-30 </td> </tr> <td class = "table_label"> position </td> <td class = "edit "id =" job "> department manager </td> <td class =" table_label "> website </td> <td class =" edit "id =" web "> www.helloweba.com </td> </tr> <td class = "table_label"> creation time </td> <td> 21:11:59 </td> <td class = "table_label ""> modification time </td> <td id =" modifiedtime "> 09:42:52 </td> </tr> <td class =" table_label "> remarks </ td> <td class = "textarea" id = "note" colspan = "3"> remarks </td> </tr> </tbody> </table>

This is a table of user information. From the code, we can find that the td of the response field information has assigned a class and id attribute and assigned a value. It is worth mentioning that the id value corresponding to the td in the table is one-to-one correspondence with the field name in the database, so that the background can obtain the corresponding field information during editing, the PHP code will be discussed later.
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 renders the table style to make the table look more comfortable.
JQuery
When talking about jquery, remember to reference jquery and jeditable plug-ins between

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

Then, call the plug-in.

$ (Function () {$ ('. edit '). editable ('Save. php ', {width: 120, height: 18, // onblur: 'ignore', cancel: 'cancel', submit: 'confirmed', indicator: '', tooltip: 'click to edit... '});});

The plug-in provides calling of many attributes and methods. You can set the width, height, text information of the button, loading image at the time of submission, and prompt information on the mouse sliding. Save. php is the address of the background program that the edited information is finally submitted. Now let's see if the information in the table can be edited.
Jeditable also provides select and textarea edits and plug-in api interfaces.
Let's take a look at the processing of select in the drop-down box:

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

Type specifies the select type. The data loaded in the select statement comes from json. php. json. php provides the data source required for the drop-down box.

$ Array ['old customer'] = 'old customer'; $ array ['develop independently '] = 'develop independently'; $ array ['partner '] = 'partner '; $ array ['Public relation '] = 'public relation'; $ array ['exhibition '] = 'exhibition'; print json_encode ($ array );

The data directly exists in the json. php file. Of course, you can also read the database information and generate json data. For details about how to generate json data, see. Another way is to specify data directly in editable:

$ ('. Edit_select '). editable ('Save. php ', {data: "{'old customer': 'old customer', 'develop independently': 'develop independently ', 'partner': 'partner ', 'exhibition ': 'exhibition '} ", type:" select ",});

It is not hard to find that the data in the above Code is a string of json data.
The textarea type is no longer the majority. You can change the type to textarea. PS: the default type is text.
When processing the date type, I access a jquery ui calendar plug-in. Of course, don't forget to introduce the juqery ui plug-in and style:

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

Datepicker calendar plug-in connected to jquery ui

$.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();   } }); 

The called Code directly specifies the type as datepicker.

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

Now let's see if the date of the "Deadline" field in the table can be modified. Now, you can add more plug-ins.
PHP
The edited field information will be sent to the background program save. php for processing. Save. php needs to do the following: receive the field information data submitted by the front-end, perform necessary filtering and verification, update the corresponding field content in the data table, and return the result.

Include_once ("connect. php "); // connect to the database $ field =$ _ POST ['id']; // obtain the field name submitted by the front end $ val =$ _ POST ['value']; // obtain the content of the field submitted by the front end $ val = htmlspecialchars ($ val, ENT_QUOTES); // filter the processed content $ time = date ("Y-m-d H: i: s "); // obtain the current system time if (emptyempty ($ val) {echo" cannot be blank ";} else {// update field information $ query = mysql_query ("update customer set $ field = '$ val', modifiedtime = '$ time' where id = 1 "); if ($ query) {echo $ val;} else {echo "data error ";}}

Return to the starting HTML code. The field content displayed in the table is certainly read from the database. Therefore, you can use PHP to read the data table and show the content as OK, let's write a detailed process by yourself.
In this case, the Editable table is closed. However, it cannot be completed yet. I will attach the following articles about the verification of the validity of input information. Please pay attention to them.

I hope that every article compiled by Alibaba Cloud will be helpful to you.