Implement code based on JQ editable table content

This example applies to the scenario: when viewing the details, such as user details, found that some of the field information needs to be modified, you can directly click on the field content to modify, save the user time, (traditional approach is to enter an edit page, list all the edited field information, even if you only need to edit one or two of the field content, Then click Submit to improve the Web response speed, thus improving the front-end user experience.

This example relies on the jquery library and is based on the Jeditable plug-in, with the following features:

Real-time editing, background real-time response, and immediate completion of local refresh.
You can customize the input form type, currently jeditable provides Text,select,textarea type.
Responds to the keyboard's return and ESC keys.
Plug-in mechanism, this example provides consolidation of the DatePicker Calendar control with the jquery UI.
Here we go step-by-step to explain the implementation process.

The code is as follows

Copy Code

<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 Tel </td> <TD width= "30%" class= "edit" id= "Phone" >021-12345678</td> </tr> <tr> <TD class= "Table_label" > Appellation </td> <TD class= "edit" id= "solutation" > Mr. </td> <TD class= "Table_label" > Mobile </td> <TD class= "edit" id= "mobile" >13800000000</td> </tr> <tr> <TD class= "Table_label" > Company name </td> <TD class= "edit" id= "Company" > Chang Fung Group </td> <TD class= "Table_label" > E-mail </td> <TD class= "edit" id= "email" >web@shuro.cn</td> </tr> <tr> <TD class= "Table_label" > Potential customer Source </td> <TD class= "Edit_select" id= "source" > PR </td> <TD class= "Table_label" > Limited period </td> <TD class= "DatePicker" id= "Sdate" >2011-11-30</td> </tr> <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.shuro.cn</td> </tr> <tr> <TD class= "Table_label" > Creation time </td> <td>2011-12-04 21:11:59</td> <TD class= "Table_label" > Modification Time </td> <TD id= "Modifiedtime" >2011-12-05 09:42:52</td> </tr> <tr> <TD class= "Table_label" > Notes </td> <TD class= "textarea" id= "note" colspan= "3" > Memo info </td> </tr> </tbody> </table>

This is a table of user information, from the code can find the response of the field information TD has given a class and id attribute, and assigned a value. It is worth mentioning that the TD in the table corresponding to the value of the ID and the database in the field name one by one corresponds to do so in order to edit the background to get the corresponding field information, the following PHP code will be mentioned.

The code is as follows	Copy Code
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; Text-indent:.3em; outline:0;} . Table_label{background: #e8f5fe; text-align:right;}

CSS renders the table style, making the table look more comfortable.

Jquery
When it comes to jquery, be sure to refer to the jquery and jeditable plug-ins between the

The code is as follows	Copy Code
<script type= "Text/javascript" src= ". /script/jquery.js "></script> <script type= "Text/javascript" src= "/script/jquery.jeditable.js" ></script>

Then start calling the plug-in.

The code is as follows	Copy Code
$ (function ( {      $ ('. Edit '). Editable (' save.php ', {           : width    ,          height    :         //onblur   : ' Ignore ', & nbsp;        cancel   : ' Cancel ',           submit   : ' OK ',          Indicator: ' ',          tooltip   : ' Click to edit ... '     }); });

The Jeditable plug-in provides a number of calls to properties and methods. You can set the width, height, text information of the button, the loading picture when submitting, the hint information on the mouse slide and so on. Save.php is the address of the backend program after the edited information is finally submitted. Now see if the information in the table can be edited oh.

Jeditable also provides select,textarea type of editing and provides plug-in API interfaces.

To see the processing of the dropdown selection box select:

The code is as follows	Copy Code
$ ('. Edit_select '). Editable (' save.php '), { Loadurl: ' json.php ', Type: "Select", });

Type Specifies the select type, and the data that is contained in the Select is from json.php,json.php provides the data source required for the Drop-down box.

The code is as follows	Copy Code
$array [' old customers '] = ' old customers '; $array [' develop alone '] = ' develop alone '; $array [' partner '] = ' partner '; $array [' public relations '] = ' public Relations '; $array [' exhibition '] = ' exhibition '; Print Json_encode ($array);

The data is directly in the json.php file, and you can, of course, read the database information and generate the JSON data.

$ ('. Edit_select '). Editable (' save.php '), {
Data: "{' Old customers ': ' Old customers ', ' Develop alone ': ' Develop alone ', ' partner ': ' partner ', ' exhibition ': ' Exhibition '}",
Type: "Select",
});
It's not hard to see that the data in the above code is a string of JSON data.

TextArea type is no longer a majority, it is OK to change type to textarea. PS: The default type is text.

When working with date types, I have access to a DatePicker calendar plugin for the jquery UI, and of course don't forget to introduce Juqery UI Plug-ins and styles:

The code is as follows	Copy Code
<link rel= "stylesheet" type= "Text/css" href= "/style/jquery-ui.css"./> <script type= "Text/javascript" src= "/script/jquery-ui.js" ></script>

DatePicker Calendar plugin with jquery UI

code is as follows	copy code
$.editable.addinputtype (' DatePicker ', {     element: function (settings, original) {         var input = $ (' <input class= ' input '/& gt; ');         input.attr ("ReadOnly", "ReadOnly");         $ (this). append (input);         return (input);    },     plugin:function (Settings, original) {     & nbsp;   var form = this;         $ ("input", this). DatePicker ();    } });

The code invoked directly specifies that the type is datepicker.

The code is as follows	Copy Code
$ (". DatePicker"). Editable (' save.php '), { WIDTH:120, Type: ' DatePicker ', onblur: "Ignore", });

Now see if the date in the table with the "Deadline" field can be modified. Well, there are other additional plugins to look forward to your joining.

Php
The edited field information is sent to the background program save.php program processing. Save.php needs to do is to receive the field information data submitted by the front-end, and to filter and verify the necessary, and then update the corresponding field contents in the datasheet, and return the results.

code is as follows

copy code

include_once ("connect.php");//Connection Database $field =$_post[' id ']; // Gets the field name submitted by the front end $val =$_post[' value '];//get the corresponding content of the field submitted by the front-end $val = Htmlspecialchars ($val, ent_quotes);//filter Processing &nbs P $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";        } }

The complete example is as follows

The code is as follows

Copy Code

<link rel= "stylesheet" type= "Text/css" href= "/style/jquery-ui.css"./> <style type= "Text/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 ("./images/btn_bg.gif") Repeat-x bottom; font-weight:bold ; Text-indent:.3em; outline:0;} . Table_label{background: #e8f5fe; text-align:right;} . btn{height:24px Background:url ("./images/btn_bg.gif") repeat-x; padding:0 4px; font-size:12px; border:1px solid #ccc; Cursor:pointer; MARGIN-LEFT:3PX} . input{border:1px solid #369; background: #ffc; padding:2px} . msg{padding-left:30px margin-top:20px} TEXTAREA{FONT-SIZE:12PX} </style> <script type= "Text/javascript" src= "Http://www.shuro.cn/demo/Script/jquery.js" ></script> <script type= "Text/javascript" src= "/script/jquery.jeditable.min.js" ></script> <script type= "Text/javascript" src= "/script/jquery-ui.min.js" ></script> <script type= "Text/javascript" > $ (function () { $ ('. Edit '). Editable (' save.php '), { WIDTH:120, Height:18, onblur: "Ignore", Cancel: ' Cancellation ', Submit: ' OK ', Indicator: ' <img src= './images/loader.gif ">", ToolTip: ' Click to edit ... ', Callback:function (value, settings) { $ ("#modifiedtime"). HTML ("just"); } }); $ ('. Edit_select '). Editable (' save.php '), { Loadurl: ' json.php ', Type: "Select", Cancel: ' Cancellation ', Submit: ' OK ', Indicator: ' <img src= './images/loader.gif ">", ToolTip: ' Click to edit ... ', Style: ' Display:inline ' }); $ (". DatePicker"). Editable (' save.php '), { WIDTH:120, Type: ' DatePicker ', onblur: "Ignore", Cancel: ' Cancellation ', Submit: ' OK ', Indicator: ' <img src= './images/loader.gif ">", ToolTip: ' Click to edit ... ', Style: ' Display:inline ' }); $ (". TextArea"). Editable (' save.php '), { Type: ' TextArea ', Rows:6, COLS:50, onblur: "Ignore", Cancel: ' Cancellation ', Submit: ' OK ', Indicator: ' <img src= './images/loader.gif ">" }); }); DatePicker Calendar Plug-ins that invoke the 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 (); } }); </script> </head> <body> <div id= "Main" > <div class= "msg" ><strong> tips </strong&gt: Click on the field in the table to edit the contents of the online. </div> <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" > Lee </td> <TD width= "20%" class= "Table_label" > Office Tel </td> <TD width= "30%" class= "edit" id= "Phone" >021-22072698</td> </tr> <tr> <TD class= "Table_label" > Appellation </td> <TD class= "edit" id= "Solutation" Mr. >2 <TD class= "Table_label" > Mobile </td> <TD class= "edit" id= "mobile" >123</td> </tr> <tr> <TD class= "Table_label" > Company name </td> <TD class= "edit" id= "Company" > cannot be </td> <TD class= "Table_label" > E-mail </td> <TD class= "edit" id= "email" >hilder.liang@gmail.com</td> </tr> <tr> <TD class= "Table_label" > Potential customer Source </td> <TD class= "Edit_select" id= "source" > Developed alone </td> <TD class= "Table_label" > Limited period </td> <TD class= "DatePicker" id= "Sdate" >2011-11-30</td> </tr> <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.shuro.cn</td> </tr> <tr> <TD class= "Table_label" > Creation time </td> <td>2010-12-04 21:11:59</td> <TD class= "Table_label" > Modification Time </td> <TD id= "Modifiedtime" >2012-02-13 20:13:36</td> </tr> <tr> <TD class= "Table_label" > Notes </td> <TD class= "textarea" id= "note" colspan= "3" > Memo information gfdfgsdgteftge44</td> </tr> </tbody> </table> <br/> <br/> <br/> <br/> <br/> </div>