ENHANCEMENT Allow selection of items in GridField (via JavaScript only)

css/GridField.css

@@ -1,5 +1,7 @@
 /** Core styles for the basic GridField form field without any specific style.  @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
 .cms fieldset.ss-gridfield > div { margin-bottom: 35px; }
+.cms fieldset.ss-gridfield[data-selectable] tr.ui-selected, .cms fieldset.ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
+.cms fieldset.ss-gridfield[data-selectable] td { cursor: pointer; }
 .cms table.ss-gridfield.field { box-shadow: none; padding: 0; margin: 20px 0 0 0; border-collapse: separate; border-bottom: 0 none; }
 .cms table.ss-gridfield.field thead { color: #1d2224; background: transparent; }
 .cms table.ss-gridfield.field tbody { background: #FFF; }

javascript/GridField.js

@@ -1,4 +1,16 @@
 jQuery(function($){
+
+	$('fieldset.ss-gridfield').entwine({
+		getItems: function() {
+			return this.find('.ss-gridfield-item');
+		}
+	});
+
+	$('fieldset.ss-gridfield *').entwine({
+		getGridField: function() {
+			return this.parents('fieldset.ss-gridfield:first');
+		}
+	});
 		
 	$('fieldset.ss-gridfield .action').entwine({
 		onclick: function(e){
@@ -26,13 +38,6 @@ jQuery(function($){
 		}
 	});
 	
-	var removeFilterButtons = function() {
-		// Remove stuff
-		$('th').children('div').each(function(i,v) {
-			$(v).remove();
-		});	
-	}	
-	
 	/*
 	 * Upon focusing on a filter <input> element, move "filter" and "reset" buttons and display next to the current <input> element
 	 * ToDo ensure filter-button state is maintained after filtering (see resetState param)
@@ -46,8 +51,10 @@ jQuery(function($){
 				return false;
 			}
 			var eleInput = $(this);
+
 			// Remove existing <div> and <button> elements in-lieu of cloning
-			removeFilterButtons();		
+			this.getGridField().find('th > div').each(function(i,v) {$(v).remove();});	
+
 			var eleButtonSetFilter = $('#action_filter');
 			var eleButtonResetFilter = $('#action_reset');
 			// Retain current widths to ensure <th>'s don't shift widths
@@ -71,4 +78,43 @@ jQuery(function($){
 		}
 	});	
 
+	/**
+	 * Allows selection of one or more rows in the grid field.
+	 * Purely clientside at the moment.
+	 */
+	$('fieldset.ss-gridfield[data-selectable]').entwine({
+		/**
+		 * @return {jQuery} Collection
+		 */
+		getSelectedItems: function() {
+			return this.find('.ss-gridfield-item.ui-selected');
+		},
+		/**
+		 * @return {Array} Of record IDs
+		 */
+		getSelectedIDs: function() {
+			return $.map(this.getSelectedItems(), function(el) {return $(el).data('id');});
+		}
+	});
+	$('fieldset.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({
+		onmatch: function() {
+			this._super();
+			
+			// TODO Limit to single selection
+			this.selectable();
+		},
+		onunmatch: function() {
+			this._super();
+			this.selectable('destroy');
+		}
+		 
+	});
+
+	$('fieldset.ss-gridfield[data-multiselect] .ss-gridfield-item').entwine({
+		onclick: function() {
+			// this.siblings('selected');
+			this._super();
+		}
+	});
+
 });

scss/GridField.scss

@@ -31,9 +31,22 @@ $gf_border_radius:	7px;
 }
 
 .cms {
-	fieldset.ss-gridfield>div {
-		margin-bottom: 35px;
+	fieldset.ss-gridfield {
+		& > div {
+			margin-bottom: 35px;
+		}
+
+		&[data-selectable] {
+			tr.ui-selected, tr.ui-selecting {
+				background: #FFFAD6 !important;
+			}
+
+			td {
+				cursor: pointer;
+			}
+		}
 	}
+
 	table.ss-gridfield.field {
 		box-shadow: none;		
 		padding: 0;