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

Source: Internet
Author: User
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/

?

?

?

?

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.