首页>>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>  
  30. <script type="text/javascript">
  31.         $(document).ready(function () {
  32.             $("#editTable tbody td").liveeditor({
  33.                 editingCss: 'editing',
  34.  
  35.                 // Scroll to focused editor
  36.                 onEditorFocused: function () {
  37.                     var $window = $(window);
  38.                     var $body = $('html, body');
  39.                     var elem = $(this);
  40.                     var elemTop = elem.offset().top;
  41.                     var elemLeft = elem.offset().left;
  42.                     var windowWidth = $window.width();
  43.                     var windowHeight = $window.height();
  44.                     var docViewTop = $window.scrollTop();
  45.                     var docViewLeft = $window.scrollLeft();
  46.                     var scrollVertical = (elemTop + elem.height() > docViewTop + windowHeight) || (elemTop < docViewTop);
  47.                     var scrollHorizontal = (elemLeft + elem.width() > docViewLeft + windowWidth) || (elemLeft < docViewLeft);
  48.                     if (scrollVertical && scrollHorizontal) {
  49.                         //Scroll diagonally
  50.                         $body.stop()
  51.                             .animate({
  52.                                 scrollTop: (elemTop - windowHeight / 2) + 'px', 
  53.                                 scrollLeft: (elemLeft - windowWidth / 2) + 'px'
  54.                             }, 'fast');
  55.                     } else if (scrollVertical) {
  56.                         //Scroll vertically
  57.                         $body.stop()
  58.                             .animate({
  59.                                 scrollTop: (elemTop - windowHeight / 2) + 'px'
  60.                             }, 'fast');
  61.                     } else {
  62.                         //Scroll horizontally
  63.                         $body.stop()
  64.                             .animate({
  65.                                 scrollLeft: (elemLeft - windowWidth / 2) + 'px'
  66.                             }, 'fast');
  67.                     }
  68.                 },
  69.                 
  70.                 //Track changes on row level
  71.                 onChanged: function () {
  72.                     var row = $(this).closest('tr');
  73.                     if ($('.liveeditor-changed',row).length > 0)
  74.                         row.addClass('changed');
  75.                     else
  76.                         row.removeClass('changed');
  77.                 }
  78.             });
  79.  
  80.             //Save changes
  81.             $('#saveButton').click(function () {
  82.                 $.liveeditor.closeEditor($("#editTable tbody td"));
  83.                 var headers = $('#editTable thead tr th');
  84.                 $('#editTable tbody tr.changed').each(function () {
  85.                     var row = $(this);
  86.                     var data = "row=" + row.attr("row") + "&" + $.liveeditor.serialize($('td', row), headers);
  87.                     $.ajax({
  88.                         type:"POST",
  89.                         url: "ajax.php",
  90.                         data: data,
  91.                         success: function(data){
  92.                             $('#ajaxResponses').append("<p>" + data + "</p>");
  93.                             $.liveeditor.reset($("#editTable tbody td"));
  94.                         }, 
  95.                         error: function(){
  96.                             console.log("Failed to save changes");
  97.                         }
  98.                     });
  99.                 });
  100.             });
  101.         });
  102.  
  103. </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