Jquery Plugin: pfSelect - click drag select for huge datasets

Author: Philip Floetotto
Version: 1.0
Download: jquery.pfSelect.js (3 kb)

Introduction

This lightweight select plugin allows you to select elements easily by click-drag select, shift select or ctrl select within a huge dataset and without any speed decrease. It adds a mouseover event to each specified element (by default elements with class "selectable") and doesn't calculate any marquee rectangle as the Jquery UI plugin does. Therefore it has no performance issues with hundreds of elements. Use this plugin if you have tons of elements and you need fluid interactivity.

If you have just a few elements, please have a look at Jquery UI selectable plugin as it has more features. If you have tons of elements and need speed, use pfSelect.

Example - defining a "hot" td and selecting the corresponding parent row

In this example the first column is "hot" because we added the class "selectable" to it. By clicking on the td or click dragging you select the parent row. This is especially helpful when you need to make multiple edits for the selected rows, etc. You can deselect the rows by clicking in any other column or in the deselect area.

First Name Last Name Age Total Discount Difference Date
Bruce Almighty 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
NOTE - the button has the "noDeselect" class to avoid the deselection of the rows when it is clicked $(document).ready(function() { $('#table1').select({ selectElement:'tr', // which parent element should be selected. If blank, the element itself will be selected targetWindow: '#deselectArea', // defines the element in which you can click to deselect all rows. }); $("#table1").tablesorter(); });

Once selected, you can retrieve the ids of each row quite easily using following function function getSelectedIds(){ var ids = []; $('.selected').each(function(){ ids.push(this.id); }); return ids.toString(); }

Example - selecting the td element instead of the parent row

In some cases you might want to select each individual td cell to do a mass update of a cell using an ajax request. In those cases you leave the option "selectElement" blank and it will select the target element by default. Click drag over the bold columns to select the cells.

First Name Last Name Age Total Discount Difference Date
Bruce Almighty 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
$(document).ready(function() { $('#table2').select({ targetWindow: '#deselectArea', // defines the element in which you can click to deselect all rows. }); $("#table2").tablesorter(); });

Known Issues


Please feel free to send me feedback and suggestions to mmeier23@gmail.com