首页>>Jquery文字>>实时编辑表格，可以编辑的表格(2013-12-10)

实时编辑表格，可以编辑的表格

 本站已经有《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》这个案例是一个非常完整的案例，带数据库更新部分

本例没有更新数据库的部分，但是有传递的过程

实时编辑表格，可以编辑的表格
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

PHP Code
  1. <table id="editTable">  
  2.             <thead>  
  3.                 <tr>  
  4.                     <?php   
  5.                     for($colIndx=0;$colIndx<5;$colIndx++){  
  6.                         ?>  
  7.                     <th name="<?php echo "c".$colIndx ?>"><?php echo "Column $colIndx"?></th>  
  8.                         <?php  
  9.                     } ?>  
  10.                 </tr>  
  11.             </thead>  
  12.             <tbody>  
  13.                 <?php  
  14.                 for($rowIndx=0;$rowIndx<5;$rowIndx++){  
  15.                     ?>  
  16.                 <tr row="<?php echo $rowIndx ?>">  
  17.                     <?php  
  18.                     for($colIndx=0;$colIndx<5;$colIndx++){  
  19.                         ?>  
  20.                     <td><?php echo "R".$rowIndx."C".$colIndx ?></td>  
  21.                         <?php  
  22.                     } ?>  
  23.                 </tr>  
  24.                     <?php  
  25.                 } ?>  
  26.             </tbody>  
  27.         </table>  
  28.         <input id="saveButton" type="button" value="Save"/>  
  29.         <div id="ajaxResponses"></div>  
  31. <script type="text/javascript">
  32.         $(document).ready(function () {
  33.             $("#editTable tbody td").liveeditor({
  34.                 editingCss: 'editing',
  35.  
  36.                 // Scroll to focused editor
  37.                 onEditorFocused: function () {
  38.                     var $window = $(window);
  39.                     var $body = $('html, body');
  40.                     var elem = $(this);
  41.                     var elemTop = elem.offset().top;
  42.                     var elemLeft = elem.offset().left;
  43.                     var windowWidth = $window.width();
  44.                     var windowHeight = $window.height();
  45.                     var docViewTop = $window.scrollTop();
  46.                     var docViewLeft = $window.scrollLeft();
  47.                     var scrollVertical = (elemTop + elem.height() > docViewTop + windowHeight) || (elemTop < docViewTop);
  48.                     var scrollHorizontal = (elemLeft + elem.width() > docViewLeft + windowWidth) || (elemLeft < docViewLeft);
  49.                     if (scrollVertical && scrollHorizontal) {
  50.                         //Scroll diagonally
  51.                         $body.stop()
  52.                             .animate({
  53.                                 scrollTop: (elemTop - windowHeight / 2) + 'px', 
  54.                                 scrollLeft: (elemLeft - windowWidth / 2) + 'px'
  55.                             }, 'fast');
  56.                     } else if (scrollVertical) {
  57.                         //Scroll vertically
  58.                         $body.stop()
  59.                             .animate({
  60.                                 scrollTop: (elemTop - windowHeight / 2) + 'px'
  61.                             }, 'fast');
  62.                     } else {
  63.                         //Scroll horizontally
  64.                         $body.stop()
  65.                             .animate({
  66.                                 scrollLeft: (elemLeft - windowWidth / 2) + 'px'
  67.                             }, 'fast');
  68.                     }
  69.                 },
  70.                 
  71.                 //Track changes on row level
  72.                 onChanged: function () {
  73.                     var row = $(this).closest('tr');
  74.                     if ($('.liveeditor-changed',row).length > 0)
  75.                         row.addClass('changed');
  76.                     else
  77.                         row.removeClass('changed');
  78.                 }
  79.             });
  80.  
  81.             //Save changes
  82.             $('#saveButton').click(function () {
  83.                 $.liveeditor.closeEditor($("#editTable tbody td"));
  84.                 var headers = $('#editTable thead tr th');
  85.                 $('#editTable tbody tr.changed').each(function () {
  86.                     var row = $(this);
  87.                     var data = "row=" + row.attr("row") + "&" + $.liveeditor.serialize($('td', row), headers);
  88.                     $.ajax({
  89.                         type:"POST",
  90.                         url: "ajax.php",
  91.                         data: data,
  92.                         success: function(data){
  93.                             $('#ajaxResponses').append("<p>" + data + "</p>");
  94.                             $.liveeditor.reset($("#editTable tbody td"));
  95.                         }, 
  96.                         error: function(){
  97.                             console.log("Failed to save changes");
  98.                         }
  99.                     });
  100.                 });
  101.             });
  102.         });
  103.  
  104. </script>

ajax.php

 

PHP Code
  1. <?php  
  2.   
  3. $info = array();  
  4. foreach($_POST as $key => $value){  
  5.     $info[] = "$key = $value";  
  6. }  
  7. echo "Storing to DB: ". implode(', ', $info);  
  8. //echo "Ajax return";  
  9. //throw new Exception("Ajax error", 404)  
  10. ?>  

 


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