这是一个基于 PHP/Ajax/jQuery 开发的表格组件。

var targetUrl = "listing.php"; // show all records     // update status  function update_status(id)  {   if (document.getElementById(id).checked == false)    var status = 0;   else   var status = 1;      $("#message").text('');   var id = id.replace('active_','');      $.ajax({    type: 'post',    url: 'update_status.php',       data: 'id='+id+"&status="+status,    beforeSend: function(){        $("#loader-"+id).show();    },    success: function(e){     $("#loader-"+id).hide();     if(e==1)     $("#message").append("<span>Status has been activated.</span>");     else     $("#message").append("<span>Status has been inactivated.</span>");    }   });  }     // update order   $(document).ready(function(){   $('#sortable').sortable({    update: function(event, ui) {     var itemOrder = $(this).sortable('toArray').toString();        $.get('update_order.php', {itemOrder:itemOrder});    }   });  });        $(document).ready(function(){   /// first time record   var content = $("#sortable"); // main content ul  //content.load(targetUrl);     // delete record     $('a#delete').livequery('click', function(e) {   if(confirm('Are you sure you want to delete this record?')==false)   return false;   e.preventDefault();   var parent  = $(this).parent();   var temp    = parent.attr('id').replace('delete-','');   var main_tr = $('#id-'+temp);       $.ajax({     type: 'get',     url: 'delete.php?id='+ parent.attr('id').replace('delete-',''),     data: '',     beforeSend: function(){     },     success: function(){      main_tr.fadeOut(700,function(){       main_tr.remove();      });     }    });   });      // sorting records   $('.hover').click(function(){     var content = $("#sortable"); // main content ul     content.load(targetUrl+'?sort='+$(this).html());     $('.hover').css('background-color','');     $(this).css('background-color','#99CC99');   });     });     // formValidation  function validateFrm(formType)  {   if($('#email').val().length < 1 || $('#name').val().length < 1){    alert('Please fill the required field.');   }   else   {       var formParam = $("#customForm").serialize();     if(formType == 'add')    {     var file = 'add_record.php';     var message = 'Record Added !';    }    else    {     var file = 'update_record.php';     var message = 'Record Updated !';    }       $.post(file+"?"+formParam,{    }, function(response){         get_result = response;     if(response == 1)     {       $('#faceBoxmessage').fadeOut();       $('#faceBoxmessage').html(unescape(message));       $('#faceBoxmessage').fadeIn();          setTimeout(" $.facebox.close();",1000)       //////////////       var content = $("#sortable"); // main content ul       content.load(targetUrl);       $('.hover').css('background-color','');     }    });   }  }

在线演示：http://demos.99points.info/zgrid/

项目主页：http://www.open-open.com/lib/view/home/1330480426311