Grid: Replace spreadsheet demo (utterly incomplete) with CSV editor (somewhat functional)

jzaefferer · jzaefferer · commit c2dc5ae872f8 · 2011-09-28T18:40:11.000-04:00
diff --git a/grid-editing/csv-editor.html b/grid-editing/csv-editor.html
@@ -43,21 +43,35 @@
 	$(function() {
 		var columns = [],
 			i, j;
-		for (i = 65; i <= 90; i++) {
+		for (i = 65; i <= 70; i++) {
 			columns.push(String.fromCharCode(i));
 		}
-		var source = [];
-		for (j = 0; j < 50; j++) {
-			source.push({});
-		}
+		var source = [{}];
 
-		$( "#spreadsheet" ).grid({
+		$( "#csvEditor" ).grid({
 			columns: columns,
 			source: source
 		})
 			.gridEditor()
 			.navigator()
 			.grid("refresh");
+
+		$( "#addRow" ).click( function() {
+			$.observable( source ).insert( {} );
+		});
+
+		$( "#export" ).click(function() {
+			var result = "";
+			for (j = 0; j < source.length; j++) {
+				var row = [];
+				for (i = 0; i < columns.length; i++) {
+					// TODO proper CSV editor would escape values here
+					row.push(source[j][columns[i]] || "");
+				}
+				result += row.join(",") + "\n";
+			}
+			console.log(result);
+		});
 	});
 	</script>
 	<style>
@@ -67,9 +81,9 @@
 </head>
 <body>
 
-<h1>Grid based custom spreadsheet (experimental)</h1>
+<h1>Grid based custom csv editor (experimental)</h1>
 
-<table id="spreadsheet">
+<table id="csvEditor">
 	<thead>
 		<tr>
 		</tr>
@@ -78,5 +92,8 @@ <h1>Grid based custom spreadsheet (experimental)</h1>
 	</tbody>
 </table>
 
+<button id="addRow">Add row</button>
+<button id="export">Export as CSV (on console for now)</button>
+
 </body>
 </html>
diff --git a/ui/jquery.ui.grid.js b/ui/jquery.ui.grid.js
@@ -44,7 +44,7 @@ $.widget( "ui.grid", {
 			});
 		}
 	},
-	
+
 	_draw: function() {
 		var totalWidth = 0,
 			colWidths = this.element.find( "tr:first" ).children().map(function() {
@@ -73,10 +73,10 @@ $.widget( "ui.grid", {
 			uiGridBodyTable = ( this.uiGridBodyTable = this.element )
 				.addClass( "ui-grid-body-table" )
 				.appendTo( uiGridBody ),
-			
+
 			uiGridFootTable = ( this.uiGridFootTable = $("<table class='ui-widget-content ui-grid-foot-table'></table>") )
 				.appendTo( uiGridFoot );
-		
+
 		// These are used in refresh when needed for scrollbar padding
 		this.uiGridHeadAndFoot = this.uiGridHead.add( this.uiGridFoot );
 		this.uiGridHeadTableAndFootTable = this.uiGridHeadTable.add( this.uiGridFootTable );
@@ -112,7 +112,7 @@ $.widget( "ui.grid", {
 		// Move table THEAD to grid head for fixed column headers
 		uiGridBodyTable.find( "thead" )
 			.appendTo( uiGridHeadTable );
-		
+
 		// Move table TFOOT to grid foot for fixed footer
 		uiGridBodyTable.find( "tfoot" )
 			.appendTo( uiGridFootTable );
