首页>>表单>>可以编辑的表格，实时修改，无刷新修改内容(2013-10-02)

可以编辑的表格，实时修改，无刷新修改内容

 包括select内容异步加载,日历选择,适用于客户管理，注册帐号管理等,本例更适用于单独修改一个数据不同于之前freejs发布的其他实时修改

表CREATE TABLE `customer` (

  `id` int(11) NOT NULL auto_increment,

  `username` varchar(100) NOT NULL,

  `solutation` varchar(40) NOT NULL,

  `phone` varchar(50) NOT NULL,

  `company` varchar(100) NOT NULL,

  `mobile` varchar(50) NOT NULL,

  `source` varchar(50) NOT NULL,

  `sdate` date NOT NULL,

  `job` varchar(50) NOT NULL,

  `web` varchar(100) NOT NULL,

  `email` varchar(100) NOT NULL,

  `createtime` datetime NOT NULL,

  `modifiedtime` datetime default NULL,

  `note` varchar(500) NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

 

可以编辑的表格，实时修改，无刷新修改内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 index.php

XML/HTML Code
  1. <table width="100%" border="0" cellspacing="0" cellpadding="0">  
  2.   <tbody>  
  3.     <tr>  
  4.       <td width="10%" class="table_label">Name</td>  
  5.       <td width="40%" class="edit" id="username">fs</td>  
  6.       <td width="10%" class="table_label">Tel</td>  
  7.       <td width="40%" class="edit" id="phone">1</td>  
  8.     </tr>  
  9.     <tr>  
  10.       <td class="table_label">Sex</td>  
  11.       <td class="edit" id="solutation">先生</td>  
  12.       <td class="table_label">MB</td>  
  13.       <td class="edit" id="mobile">13</td>  
  14.     </tr>  
  15.     <tr>  
  16.       <td class="table_label">company</td>  
  17.       <td class="edit" id="company">freejs.net</td>  
  18.       <td class="table_label">email</td>  
  19.       <td class="edit" id="email">@com</td>  
  20.     </tr>  
  21.     <tr>  
  22.       <td class="table_label">from</td>  
  23.       <td class="edit_select" id="source">老客户</td>  
  24.       <td class="table_label">sdate</td>  
  25.       <td class="datepicker" id="sdate">2002-11-07</td>  
  26.     </tr>  
  27.     <tr>  
  28.       <td class="table_label">job</td>  
  29.       <td class="edit" id="job">部门经理</td>  
  30.       <td class="table_label">modify</td>  
  31.       <td id="modifiedtime">2013-10-03 03:03:17</td>  
  32.     </tr>  
  33.   </tbody>  
  34. </table>  

js

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function(){  
  3.      $('.edit').editable('save.php', {  
  4.          callback  : function(value, settings) {  
  5.              $("#modifiedtime").html("刚刚");  
  6.          }  
  7.   
  8.      });  
  9.      $('.edit_select').editable('save.php', {   
  10.          loadurl   : 'json.php',  
  11.          type      : "select",  
  12.          style     : 'display: inline',  
  13.          callback  : function(value, settings) {  
  14.              $("#modifiedtime").html("刚刚");  
  15.          }  
  16.      });  
  17.      $(".datepicker").editable('save.php', {   
  18.          type      : 'datepicker',  
  19.          onblur    : "ignore",  
  20.          style     : 'display: inline'  
  21.      });  
  22.      $(".textarea").editable('save.php', {   
  23.          type      : 'textarea',  
  24.          rows      : 6,  
  25.          cols      : 50,  
  26.          onblur    : "ignore"  
  27.      });  
  28.        
  29.      $(".edit_email").editable('save.php', {   
  30.          type      : 'email',  
  31.          select    : true  
  32.      });  
  33.      $(".edit_mobile").editable('save.php', {   
  34.          type      : 'mobile',  
  35.          select    : true  
  36.      });  
  37.      $(".edit_web").editable('save.php', {  
  38.          type      : 'url',  
  39.          select    : true   
  40.      });  
  41. });  
  42. </script>  

save.php

PHP Code
  1. <?php  
  2. include_once("conn.php");  
  3.   
  4. $field=$_POST['id'];  
  5.   
  6. $val=$_POST['value'];  
  7. $val = htmlspecialchars($val, ENT_QUOTES);  
  8. if($field=="note"){  
  9.     if(strlen($val)>10){  
  10.         echo "您输入的字符大于10字了";  
  11.         exit;  
  12.     }  
  13. }  
  14. $time=date("Y-m-d H:i:s");  
  15. if(emptyempty($val)){  
  16.     echo "不能为空";  
  17. }else{  
  18.     $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");  
  19.     if($query){  
  20.        echo $val;  
  21.     }else{  
  22.        echo "数据出错";   
  23.     }  
  24. }  
  25. ?>  

json.php异步加载select内容

PHP Code
  1. <?php  
  2. $array['老客户'] =  '老客户';  
  3. $array['独自开发'] =  '独自开发';  
  4. $array['合作伙伴'] =  '合作伙伴';  
  5. $array['公共关系'] =  '公共关系';  
  6. $array['展览会'] =  '展览会';  
  7.   
  8. print json_encode($array);  
  9.   
  10. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_48.html