Grid: Allow columns option to specify a label, use existing text when reading from markup.

Author: jzaefferer

grid-spf/autocomplete.html

@@ -55,7 +55,7 @@
 		// TODO the table is empty, so let's create it from scratch here
 		var grid = $( "table" ).grid({
 			source: cities.result,
-			columns: [ "name", "adminName1", "adminCode1", "fclName", "adminName2", "population", "countryName" ]
+			columns: [ {property: "name", label: "Name"}, {property: "adminName1", label: "Area"}, {property:"adminName2", label:"Province"}, {property:"population", label:"Population"}, {property:"countryName", label:"Country"} ]
 		});
 	});
 	</script>

grid-spf/grid.html

@@ -86,7 +86,6 @@
 		});
 
 		$( "#developers-local" ).grid({
-			columns: [ "firstName", "lastName", "country" ],
 			source: developers.result,
 			select: function( event, ui ) {
 				console.log( "Selected " + ui.item.firstName );

grid-spf/grid.js

@@ -104,7 +104,7 @@ $.widget( "ui.grid", {
 			var head = this.element.find("thead");
 			if ( !head.find( "th" ).length ) {
 				$.each( this.options.columns, function( index, column ) {
-					$( "<th>" ).text(column.property).appendTo(head);
+					$( "<th>" ).text(column.label || column.property).appendTo(head);
 				});
 			}
 			return;
@@ -115,10 +115,12 @@ $.widget( "ui.grid", {
 			var property = th.data( "property" );
 			if ( !property ) {
 				// generate property name if missing
+				// replaces whitespace and non-alphanumerics with underscore
 				property = th.text().toLowerCase().replace(/\s|[^a-z0-9]/g, "_");
 			}
 			var result = {
-				property: property
+				property: property,
+				label: th.text()
 			};
 			$.each( dataFields, function(index, dataField) {
 				result[dataField] = th.data( dataField );