Editor's Table: jquery+php enables real-time editing of table field content

Editable tables: jquery+php enables real-time editing of table field content

?

In this example, we will click on the jquery to make a text message editable form, you can edit the text content, and then click the "OK" button, the new content will be sent to the background PHP program processing, and save to the database; when the "Cancel" button is clicked, the page reverts to its original state.

?

This example applies to the scenario: when viewing details, such as user details, found that some of the field information needs to be modified, can directly click on the field content to modify, saving the user time, (the traditional practice is to go to an edit page, listing all the edited field information, even if you only need to edit one or two of the field content, Then click Submit to increase the responsiveness of the web, which improves the front-end user experience.

?

This example relies on the jquery library and is based on the jeditable plugin, with the following features:

• Real-time editing, background real-time response, and instant completion of local refresh.
• You can customize the input form type, currently jeditable provides the Text,select,textarea type.
• Responds to the keyboard's return and ESC keys.
• Plug-in mechanism, this example provides integration with the DatePicker Calendar control of the jquery UI.

Let's step through the implementation process.

?

Xhtml

We need to make a form, as follows:

 
 
   
  
  
 
   
 
    
Customer Information
 
   
 
  
   
  
  
 
   
 
    
Name
 
    
Li Xiaosan
 
    
Office Phone
 
    
021-12345678
 
   
 
   
 
    
Appellation
 
    
Mr
 
    
Cell phone
 
    
13800138000
 
   
 
   
 
    
Company Name
 
    
Chang Fung Group
 
    
E-Mail
 
    
[Email protected]
 
   
 
   
 
    
Potential customer sources
 
    
Public relations
 
    
Have a deadline
 
    
2011-11-30
 
   
 
   
 
    
Position
 
    
Department Manager
 
    
Website
 
    
Www.helloweba.com
 
   
 
   
 
    
Creation time
 
    
2010-11-04 21:11:59
 
    
Modification time
 
    
2010-11-05 09:42:52
 
   
 
   
 
    
Note
 
    
Notes Information
 
   
 
  
 
 
 
 

?

This is a table of user information, the TD that can find the field information of the response from the code gives a class and Id attribute, and assigns a value. It is worth mentioning that the value of the TD ID in the table corresponds to the field name one by one in the database, and this is done in order to get the corresponding field information in the background when editing, which will be mentioned in the following PHP code.

?

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 a table style, making the table look more comfortable.

?

Jquery

When it comes to jquery, be sure to remember to refer to jquery and jeditable plugins between pages

?

Then start calling the plug-in.

$ (function () {      $ ('. Edit '). Editable (' save.php ', {           width     : +,          height    :],          //onblur    : ' Ignore ',          cancel    : ' Cancel ',          submit    : ' OK ',          indicator: ',          tooltip   : ' Click to edit ... '      

?

The Jeditable plugin provides many properties and methods of invocation. You can set the width, height, text information of the button, load the picture at the time of submission, information on the mouse slide and so on. Save.php is the address of the background program that the edited information was eventually submitted to. Now see if the information in the table can be edited.

?

Jeditable also provides a select,textarea type of editing and provides plug-in API interfaces. Look at the processing of the dropdown select box:

$ ('. Edit_select '). Editable (' save.php ', {      loadurl   : ' json.php ',     type      

?

Type Specifies the select type, the data contained in select Riga is from the data source that json.php,json.php provides for the drop-down box.

$array [' old customers '] =  ' old customers '; $array [' develop alone '] =  ' develop alone '; $array [' partners '] =  ' partners '; $array [' public relations '] =  ' public relations '; array[' exhibition '] =  

?

This data is directly present in the json.php file, and of course you can read the database information, and then generate JSON data, on how to generate JSON data, see the application of JSON in PHP. Another way is to specify data directly in the editable:

$ ('. Edit_select '). Editable (' save.php ', {      data: "{' Old customers ': ' Old customers ', ' Develop alone ': ' Develop alone ', ' partner ': ' partner ', ' exhibition ': ' Exhibition '} ',     

?

It's easy to see that data in the above code is a string of JSON data.

The textarea type is no longer a majority, and the type is changed to textarea. PS: The default type is text.

When working with date types, I plugged into the DatePicker calendar plugin for a jquery UI, and of course not forgetting to introduce Juqery UI plugins and styles:

?

DatePicker Calendar plugin that accesses the jquery UI

$.editable.addinputtype (' DatePicker ', {     element:function (settings, original) {         var input = $ ('');         Input.attr ("ReadOnly", "ReadOnly");         $ (this). append (input);         return (input)     ,     plugin:function (settings, original) {         var form = this;         $ ("input", this). DatePicker ();     } });

?

The code that is called directly specifies that the type is datepicker.

$ (". DatePicker"). Editable (' save.php ', {      width     : +,     type      : ' DatePicker ',     onblur    

?

Now look at the date in the table with the "Deadline" field that can be modified. Well, there are other plug-ins waiting for you to join.

?

Php

The edited field information is sent to the daemon save.php program processing. What save.php needs to do is to receive the field information data submitted by the front-end, make necessary filtering and validation, and then update the corresponding field contents in the datasheet and return the results.

Include_once ("connect.php"); Connect database $field =$_post[' id '];  Gets the field name of the front-end submission $val =$_post[' value ']; Gets the contents of the field submitted by the front-end $val = Htmlspecialchars ($val, ent_quotes); Filter processing content  $time =date ("y-m-d h:i:s");//Get System Current time if (empty ($val)) {     echo "cannot be empty";} 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";         

?

Then go back to the beginning of the HTML code, the table displayed in the field content information is of course read from the database, so to use PHP to read the data table, the content displayed on the OK, the detailed process we write a bar.

?

Thus, the editable table is done. But it's not finished yet. Verification of the validity of input information I am still studying, the following article I will be attached, please pay attention to, but also look forward to your friends to join.

?

Source: helloweba.com:? Http://www.helloweba.com/view-search-74.html

?

Reference:

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-%E7%94%A8jeditable%E5%BF%AB%E9%80%9F%E6%9B%B4%E6%96%B0mysql%E8%B3%87%E6%96%99/

?

?

?

?

