首页>>表单>>在一页内无刷新更新数据，包括添加,删除,修改数据,更新状态 点击表头排序(2014-03-08)

在一页内无刷新更新数据，包括添加,删除,修改数据,更新状态 点击表头排序

 在一个页面内弹出层修改，刷新内容,表格可以按照列排序

在一页内无刷新更新数据，包括添加,删除,修改数据,更新状态 点击表头排序
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <table width="88%" border="0" class="bidding_table">  
  2.       <tr>  
  3.         <td width="17%"> </th>  
  4.         <td width="22%"> </th>  
  5.         <td width="22%">  
  6.             <span class="actionSpan">  
  7.             <a href="add_form.php" title="" class="small button add" id="add_new">  
  8.                 Add  
  9.             </a>  
  10.             </span>  
  11.         </td>  
  12.       </tr>  
  13.       <tr>  
  14.         <th width="17%" class="hover">Name</th>  
  15.         <th width="22%" class="hover">Email</th>  
  16.         <th width="22%">Actions</th>  
  17.       </tr>  
  18.       <tr>  
  19.         <td colspan="3">  
  20.           
  21.             <ul id="sortable">  
  22.               
  23.             <?php  require_once('listing.php');?>  
  24.               
  25.             </ul>  
  26.         </td>  
  27.      </tr>  
  28.     </table>  

 add_form.php

 

PHP Code
  1. <div id="container" style="width:310px;">  
  2.     <div id="faceBoxmessage" align="center">  
  3.       
  4.     </div>  
  5.     <br clear="all" />  
  6.     <form action="#" method="post" name="customForm" id="customForm" enctype="multipart/form-data"  >  
  7.       
  8.     <!--FORM FIELDS-->  
  9.     <div align="center" id="showContent">  
  10.         <span>    Name<span>*</span></span>  
  11.         <input id="name" style="margin-left:20px;" name="name" type="text" value="" />  
  12.     </div>  
  13.       
  14.     <br clear="all" />  
  15.     <div align="center" id="showContent">  
  16.         <span>    Email<span>*</span></span>  
  17.         <input id="email" style="margin-left:20px;" name="email" type="text" value="" />  
  18.     </div>  
  19.     <!--FORM FIELDS-->  
  20.       
  21.       
  22.     <br clear="all" />  
  23.     <div align="center">  
  24.         <input id="send_site" style="background:#CCCCCC;margin-left:20px;" name="send" type="button" onclick="validateFrm('add');"  value="Submit" />  
  25.     </div>  
  26.     </form>  
  27. </div>  

add_record.php

PHP Code
  1. <?php  
  2. if($_REQUEST)  
  3. {  
  4.     $email = $_REQUEST['email'];  
  5.     $name  = $_REQUEST['name'];  
  6.     $order = 1;  
  7.       
  8.     $result = @mysql_query("select max(orders) as orders from users");  
  9.       
  10.     if(mysql_num_rows($result) > 0)  
  11.     {  
  12.         while ($rows = mysql_fetch_assoc($result))  
  13.         {  
  14.             $order = $rows['orders'];  
  15.         }  
  16.         $order++;  
  17.     }  
  18.       
  19.     $query = "insert into users (email,username,status,orders) values ('".$email."','".$name."',1,".$order.")";  
  20.     $results = mysql_query( $query);  
  21.     echo $results;  
  22. }  
  23. ?>  

 listing.php

 

PHP Code
  1. <?php  
  2. require "../../conn.php";  
  3.   
  4. if(@$_REQUEST['sort'] == 'Email')  
  5. {  
  6.     $orders = 'email';  
  7. }  
  8. else if(@$_REQUEST['sort'] == 'Name')  
  9. {  
  10.     $orders = 'username';  
  11. }  
  12. else  
  13. {  
  14.     $orders = 'orders';  
  15.     //$orders = 'name';  
  16. }  
  17.   
  18. $results = @mysql_query("select * from users order by ".$orders." asc");  
  19.   
  20. while ($rows = mysql_fetch_assoc($results))  
  21. {  
  22.     $checked = '';  
  23.     if($rows['status'] == 1) {$status = 0; $checked = 'checked';}?>  
  24.       
  25.     <li class="records" id="id-<?php echo $rows['user_id'];?>" style="">  
  26.         <div class="biddingList">  
  27.           
  28.             <!--Loader Part-->  
  29.             <div class="bidDiv" style="width:30px;padding-top:6px;">  
  30.                 <span id="loader-<?php echo $rows['user_id'];?>" style="display:none">  
  31.                     <img src="img/load.gif" alt="" />  
  32.                 </span>  
  33.             </div>  
  34.               
  35.               
  36.             <!--Fields -->  
  37.             <div class="bidDiv" style="width:200px;padding-top:14px;">  
  38.                 <?php echo $rows['username'];?>  
  39.             </div>  
  40.             <div class="bidDiv" style="width:250px;padding-top:14px;">  
  41.                 <?php echo $rows['email'];?>  
  42.             </div>  
  43.             <!--Fields -->  
  44.               
  45.               
  46.             <!--Action Part-->  
  47.             <div class="bidDiv">  
  48.               
  49.                 <span class="actionSpan" id="delete-<?php echo $rows['user_id'];?>">  
  50.                 <a href="#" id="delete" title="" class="small button remove">  
  51.                     Remove  
  52.                 </a>  
  53.                 </span>  
  54.                   
  55.                 <span class="actionSpan">  
  56.                 <a href="edit_record.php?id=<?php echo $rows['user_id'];?>" title="" class="small button update" rel="facebox">  
  57.                     Update  
  58.                 </a>  
  59.                 </span>  
  60.                   
  61.                 <span class="actionSpan">  
  62.                 <input type="checkbox" value="1" name="active_<?php echo $rows['user_id'];?>" id="active_<?php echo $rows['user_id'];?>" onclick="update_status(this.id);" <?php echo $checked?> />  
  63.                 </span>  
  64.             </div>  
  65.             <!--Action Part-->  
  66.               
  67.         </div>  
  68.     </li>  
  69. <?php  
  70. }?>  
  71. <script type="text/javascript">  
  72. jQuery(document).ready(function($) {  
  73.     $('[rel*=facebox]').facebox();  
  74. });  
  75. </script>  

全部文件下载地址：http://www.freejs.net/demo/285/zip.zip


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