http://kb.cnblogs.com/page/43339/

http://www.cnblogs.com/evlon/archive/2008/12/03/1346456.html

http://www.cnblogs.com/Arlen/archive/2008/12/03/1346657.html

http://www.cnblogs.com/liujiang/archive/2008/12/03/1346820.html

http://docs.jquery.com/Plugins/Tablesorter

http://tablesorter.com/docs/

http://www.reconstrukt.com/ingrid/example1.html

$.addGridControl = function(t,p) {
   if (t.grid) return false;
   var grid = {
     table: t,
     scrollTop: 0,
     height: p.height,
     page: 0,
     headers: [],
     cols: [],
    
     addJSONData: function(JSON) {
      eval("var data = " + JSON);
      var tbody = $("tbody",this.table);
      var row = ""
      var cur = ""
      for (var i=0;i<data.rows.length;i++) {
       cur = data.rows[i]
       row = '<tr id="'+cur.id+'">'
       for (var j=0;j<cur.cell.length;j++) row += "<td>"+cur.cell[j]+"</td>"
       row += '</tr>';
       tbody.append(row);
      
      }
      tbody = null;
      this.loading = false;
      $("div.loading",this.hDiv).fadeOut("fast");
     },
     populate: function() {
      if (!this.loading) {
       this.loading = true;
       this.page++
       $("div.loading",this.hDiv).fadeIn("fast");
       //$.get("dyndata.php/page/"+this.page,function(xml) { grid.addXmlData(xml) });
       $.get("dyndata.php/page/"+this.page+"/JSON",function(xml) { grid.addJSONData(xml) });
      }
     }
    }
  
   var thead = $("thead:first",t).get(0);
   var count = 0;
   $("tr:first th",thead).each(
    function () {
     var w = p.width[count]
     $(this).css("width",w+"px");//.prepend(res);
     //在这里加事件  
     grid.headers[count++] = { width: w, el: this };
    }
   )
   count = 0;
   $("tbody tr:first td",t).each(
    function() {
     var w = p.width[count]
     $(this).css("width",w+"px");
     grid.cols[count++] = this ;
    }
   );
   grid.width = $.getCSS ? $.getCSS(t,"width") : $.getCSS(t,"width");
   grid.bWidth = grid.width;
  
   thead = null;
    
   $(t).mouseover(
     function(e) {
      var td = (e.target || e.srcElement);
      td.className = "hover"
      td.parentNode.className = "hover"
     }
    )
    .mouseout(
     function(e) {
      var td = (e.target || e.srcElement);
      td.className = ""
      td.parentNode.className = ""
     }
    )
   //while (grid.bDiv.scrollHeight<=grid.height) grid.populate()
   grid.populate()

   //$(document).mouseup(function (e) {grid.dragEnd();})
   t.grid = grid;
   // MSIE memory leak
   $(window).unload(function () {
     t.grid = null;   
    }
   );
}

$.fn.grid = function(p) {
   return this.each(
    function() {
     $.addGridControl(this,p);
    }
   );
}