zengrid

My initial prototype for zengrid, a flexible jQuery based grid. This prototype is a bit slow, but will improve this over next couple of iteration

HTML

<script src="ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
 <div id = "debug"></div>
  <div>
  <table class="grid1">
      <thead>
          <tr>
            <th data-align="center">Order</th>
            <th>Name</th>
            <th data-width="100px"  data-align="right">Age</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Raje</td>
        <td>35</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Radhika</td>
        <td>35</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Rohan</td>
        <td>35</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Tanuv</td>
        <td>35</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
  </div>
  
  <div style="padding-top:40px">
  <table class="grid2" title="Yet another Zen">
      <thead>
          <tr>
            <th data-col="order">Order</th>
            <th data-col="name">Name</th>
            <th data-col="age">Age</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
     
      
    </tbody>
  </table>
  </div>
  
  <div style="margin-top:90px">
  <table id="grid3" title="Dynamic Grid">
  </table>
 ...

CSS

.gridContainer{
    position:relative;
  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.9em;
    padding:0px;

    margin:0px;
    
  }
  
  .gridHeader  {
    margin:0px;
    padding: 0px;
    border: 1px solid skyblue;
    background: #E7F2FB ;
    
  }
  
  .gridContent {
    margin:0;
    padding:0;
    height: 120px;
    overflow:auto;
    border-left: 1px solid skyblue;
    border-right: 1px solid skyblue;
  }
  
  .grid{
    width:100%;
  }
  
  
  .header, .grid{
    border-spacing:0px;
    border-collapse:none;
    margin:0;
    padding:0;
    width:100%;
    
  }
  
  .header {
  }
  
  .header th, .grid td{
    margin:0px;
    padding:0px;
    
  }
  
  .header th {
    cursor:pointer;
  }
  
  .grid td, .header th {
      padding-top:5px;
      padding-bottom:5px;
      padding-left:5px;
      padding-right:0px;
  }
  
  
  .header th{
    border-right:1px solid skyblue;
    border-top:1px none;
    /*border-bottom: 1px solid skyblue;*/
  }
  
  .header th:last-child {
    border: 0px none;
  }
  
  .grid td {
    
    overflow:hidden;
    /*border-left: 1px solid skyblue;*/
    border-right:1px solid skyblue;
    border-bottom: 1px solid skyblue;
  }
  
  /* provide JS fallback */
  .grid td:last-child {
    border-right:0px none;
  }
  
  .grid tr:hover{
    background: lightblue;
  }

 
  
  .title-bar{
    background:skyblue;
    border-radius: 5px 5px 0px 0px;
    padding: 2px;
    background-image: linear-gradient(bottom, #AAD2E0 29%, #A5C0ED 65%);
background-image: -o-linear-gradient(bottom, #AAD2E0 29%, #A5C0ED 65%);
background-image: -moz-linear-gradient(bottom, #AAD2E0 29%, #A5C0ED 65%);
background-image: -webkit-linear-gradient(bottom, #AAD2E0 29%, #A5C0ED 65%);
background-image: -ms-linear-gradient(bottom, #AAD2E0 29%, #A5C0ED 65%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.29, #AAD2E0),
    color-stop(0.65, #A5C0ED)
);
    text-shadow: 0 1px 0...

JavaScript

// Base: V0.1

/*!
 * zengrid (jquery plugin) v0.1
 * http://tekacademy.com
 *
 * Copyright 2012, Rajesh Pillai
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://tekacademy.com/zengrid/license
 *
 * Date: Mon Jan 01 14:40 2012
 */
// BASE VERSION: http://jsbin.com/rajesh-zengrid/latest/edit
// AJAX TEST URL : http://jsbin.com/zengrid-data/js
// jQuery UI CSS URL: http://jsbin.com/rajesh-css-aristoui/js
// json parse e.f.http://jsbin.com/rajesh-json-parse/latest/edit
// todo: Edit/save, smooth resizing of columns

;$(function() {
  $.widget( "rp.zenGrid", {
    _create: function() {
      var settings = $.extend( {
        width : '100%',
        height : '100%',
        resizeColumns: true,
        allowSearch: false,
        allowDelete:true,
        pager: false,
        pagerLocation: "bottom",
        pageSize: 3,
        showRowNumber: false   // todo
      }, this.options);
      
      this._buildData(settings);
      this._setup();
      this._setupColumns();
      this._bindSource();
      this._addColResizer();
      this._addTitle();
      this._addSearch();
      this._addPager();
      this._showRowNumber();
      this._allowSorting();
      this.equalize();
    },
    
    // begin equalize
    equalize: function() {
        console.log('equa');
        var $gridBody = $(this.element);
       
        var $gridHeader = $gridBody.closest(".gridContainer").find(".header"); 
        var $firstRow = $gridBody.find("tr:first");
        
        // if there is a scrollbar account for it
        if(($gridBody.height() > $gridBody.parents(".gridContent").height())) {
          $gridHeader.find(".scroll").remove();
            var $newTh = $("<th></th>").addClass("scroll").css({
                    padding:0,
                    margin:0,
                    width:"16px"
            });
            $gridHeader.find("tr:first").append($newTh);
        } 
        else if ($gridBody.parents(".gridContainer").height() > $gridBody.height()) 
   ...