Geek Daily

There are many times when I am writing an application I need to display data in a table. Most of the time a simple HTML table styled with CSS is all that I need but occasionally I want a bit more. Today we’ll look at designing a plugin for jQuery that will add some advanced features such as row selection and sorting.

Design Goals

Starting out we are going to keep this pretty simple and as it progresses we’ll add more features.

For now we are going to start with a hand coded HTML table and CSS. In a later post we’ll look at populating the grid from a data source.

In this post today we’ll apply the CSS to the table but will expand this to a skinning system later on.

We’ll also be applying the row selection feature today.

Starting Point

Let’s use a simple table as out starting point.

<table cellpadding="0" cellspacing="0" class="easygrid">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Bill</td>
        <td>CEO</td>
        <td>53</td>
    </tr>
    <tr>
        <td>Jason</td>
        <td>Developer</td>
        <td>29</td>
    </tr>
    <tr>
        <td>Sue</td>
        <td>Accountant</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>HR Manager</td>
        <td>42</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Graphic Artist</td>
        <td>31</td>
    </tr>
</table>

Basic Style

Next we will apply some basic CSS to make our grid look nice.

body, table {
     font-family: verdana, arial, sans-serif;
}

table.easygrid {
     font-size: 11px;
     width: 600px;
     border-top: 1px solid #b8b8b8;
     border-left: 1px solid #b8b8b8;
}

table.easygrid th {
     text-align: left;
     padding: 5px;
     background: #424242;
     color: white;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td {
     padding: 5px;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td.alt {
     background: #f6f3f6;
}

table.easygrid td.selected {
     background: navy;
     color: white;
     font-weight: bold;
}

Building The Plugin

Here is the basic layout of our plugin. We’ll look at implementing those functions in a minute.

This is pretty simple so far. We have our default values, we merge the user passed options with the defaults, and then call two methods on each jQuery instance.

(function($) {
     $.fn.easygrid = function(options) {
         var defaults = {
             alternateBackground: true,
             allowRowSelect: true
         };

         options = $.extend(defaults, options);

         return this.each(function(index, table) {
             setAlternateBackground($('tr:odd td', table), options.alternateBackground);
             rowSelection(table, options.allowRowSelect, options.alternateBackground);
         });
     };
})(jQuery)

Here is our setAlternateBackground method. Note we are passing all the odd rows found in the current table.

function setAlternateBackground(rows, alt) {
     if(alt == true) {
         rows.attr('class', this.className + ' alt');
     }
}

This function appends the alt CSS class to each row if alternate row backgrounds is enabled.

The next function adds a click handler to each row to implement the row selection functionality.

function rowSelection(table, allowSelect, alt) {
     if(allowSelect == true) {
         $('tr', table).click(function() {
            //reset all rows
            $('tr', table).each(function() {
                $('td', this).each(function(index, cell) {
                    $(cell).attr('class', cell.className.replace(' selected'));
                });
            });

            //restore alt backgrounds
            setAlternateBackground($('tr:odd td', table), alt);

            //select this row
            $('td', this).attr('class', this.className + ' selected');
        });
    }
}

There is a little more involved with this function. If this feature is enabled we are adding a click handler to all the rows in the table.

First the click handler will clear any selected rows and reapply the alternate background colors. I am not sure why this gets lost.

Then, finally, the row that was clicked is selected by applying the selected CSS class to each cell of the row.

What’s Next?

That is it for this post but we will look at adding sorting to our grid in post in the near future.

Currently the row selection is a bit buggy in Firefox but works fine in IE. I will have the Firefox issues sorted out for the next post. You can check out a demo here.

Be sure you don’t miss out by grabbing the RSS feed, updates by email, or following on Twitter.

Over the last few years Rails has helped Ruby’s popularity explode. One of the biggest reasons for this is the time that Rails can save you. By working within a well defined framework a lot of development decisions are simplified and it is easier to be more organized. Throw in some great tools like ORM, Unit Testing, Mocking, and more and you have a powerhouse of developer efficiency and quality.

There has always been and probably always will be feuds over what is the best platform but what I want to show you is that those arguments are mostly irrelevant. Regardless of what platform you choose to develop on there are most of the same tools available in one form or another. The common components, for me anyway, that help me produce high quality code faster and is easier to maintain are a good IDE, easy to use unit testing and mocking frameworks, an ORM, a MVC framework, and a good JavaScript library.

I am a .Net developer by trade and a PHP developer sometimes by choice. I enjoy both environments for different reasons. I am going to talk about each of these components in a bit of detail and explain why I think they are important and then at the end of the article I will provide a list of each of these components for various languages (.Net, Java, PHP, Python, and Ruby). I have decided to only list free or open source tools because they are easy for someone to try out and we all like to save a few bucks.

The Integrated Development Environment (IDE)

To me this is the prime essential. Sure you can program in Notepad and compile with the command line but it will likely take longer and it will require more discipline to stay organized. With a good IDE you have easy project management (all you files grouped together with tabbed browsing), syntax highlighting, compilation (if applicable), and auto complete.

IDE are continuously getting more and more sophisticated and plugins allow for lots more functionality like svn and git management in the IDE.

For me my favorite IDE is Visual Studio. There are some other great programs out there like NetBeans and Eclipse but for whatever reason I have become partial to Visual Studio.

Unit Testing And Mocking

These two items go hand in hand. No application is complete without proper testing. There are plenty of people on both sides of the fence when it comes to testing. I know, I was a skeptic for a along time. It just felt weird to spend time writing code to test the real code I was going to write. Finally I just decided to give it a try and it has changed the way I program. When you are focusing on how to test your code you just write cleaner code and it’s nice to have a quick way to know if the change you just made broke anything.

Object Relational Mapper

If you have ever used an ORM you know that it can save you a huge amount of time. One of the concerns I had before jumping to an ORM was performance. I wanted to know if using an ORM would make my application slower but I was asking the wrong question. I should have been asking whether or not the small performance hit was worth the huge time savings. The answer to that is a definite YES! Rarely in an application will the ORM be the source of poor performance and if it is it can be refactored to improve or you can use straight SQL if need be.

It all comes down to not worrying about performance issues before you have any. Yes it is important to keep performance in mind but using an ORM shouldn’t be anything to worry about.

MVC Framework

MVC has become very popular thanks in part to Rails and it’s revolution in the way we do Web Development. The key component to it’s popularity is that it separates the different concerns of your application into seperate pieces. This separation allows easier testing, better design, and makes your application more maintainable overall.

JavaScript Library

It seems there is a JavaScript library for just about everything these days. I remember not too long ago there were that many and JavaScript use hadn’t exploded yet. A JavaScript library is important to your productivity. The library shouldn’t compensate for poor JavaScript skills, you need a solid foundation, but should compliment a good understanding of it. The library will take care of browser compatibility issues and low level operations letting you focus on getting the job done.

ASP.Net
IDE: Visual Studio 2008 Express
Unit Testing: NUnit
Mocking: Rhino Mocks
ORM: NHibernate
MVC: ASP.NET MVC
JavaScript: jQuery

Java
IDE: NetBeans
Unit Testing: JUnit
Mocking: EasyMock
ORM: Hibernate
MVC: Struts
JavaScript: jQuery

PHP
IDE: PHPEclipse
Unit Testing: PHPUnit
Mocking: PHPMock
ORM: Propel
MVC: Symfony
JavaScript: jQuery

Python
IDE: PyDev
Unit Testing: PyUnit
Mocking: PythonMock
ORM: SQLObject
MVC: Django
JavaScript: jQuery

Ruby
IDE: RadRails
Unit Testing: Test::Unit
Mocking: Mocha
ORM: Sequel
MVC: Rails
JavaScript: jQuery

Be sure to grab the RSS feed, get updates by email, or follow me on Twitter to stay up to date and not miss any posts.