Grid SPF: Replace sort menu with header clicks, along with icons

jzaefferer · jzaefferer · commit eb0af8e6554f · 2011-08-19T17:08:34.000+02:00
diff --git a/grid-spf/datasource.js b/grid-spf/datasource.js
@@ -15,6 +15,7 @@ $.widget( "ui.datasource", {
 		return this.data;
 	},
 
+	// TODO this needs to be applied to init options as well, to work sort: "prop" work
 	_setOption: function( key, value ) {
 		// reset offset to 0 when changing limit
 		// TODO actually only necessary when offset > offset + new limit
diff --git a/grid-spf/grid.js b/grid-spf/grid.js
@@ -21,7 +21,7 @@ $.widget( "ui.grid", {
 		this._columns();
 		this._rowTemplate();
 		this.element.addClass( "ui-widget" );
-		this.element.find( "th" ).addClass( "ui-widget-header" );
+		this.element.find( "th" ).addClass( "ui-state-default" );
 		this.element.delegate( "tbody > tr", "click", function( event ) {
 			that._trigger( "select", event, {
 				item: $( this ).data( "grid-item" )
diff --git a/grid-spf/menugrid.html b/grid-spf/menugrid.html
@@ -68,8 +68,18 @@
 	});
 	</script>
 	<style>
-	.ui-menu {
-		position: absolute;
+	thead th {
+		cursor: default;
+	}
+	thead th .ui-icon {
+		display: none;
+		height: 12px;
+	}
+	thead th.sorted .ui-icon-asc {
+		display: inline-block;
+	}
+	thead th.sorted-desc .ui-icon-desc {
+		display: inline-block;
 	}
 	tfoot td {
 		text-align: center;
@@ -81,17 +91,6 @@
 </head>
 <body>
 
-<script type="text/x-jquery-tmpl" id="menu-tmpl">
-	<ul>
-		<li>
-			<a href="#" data-sort="asc">Sort Ascending</a>
-		</li>
-		<li>
-			<a href="#" data-sort="desc">Sort Descending</a>
-		</li>
-	</ul>
-</script>
-
 <h2>Movies! Click header for sort menu, use inputs for filtering, pager for paging</h2>
 <table id="movies">
 	<thead>
diff --git a/grid-spf/menugrid.js b/grid-spf/menugrid.js
@@ -1,21 +1,18 @@
 $.widget("spf.menugrid", {
 	_create: function() {
-		var source = this.element.data("grid").options.source;
-		this.element.find( "th" ).each(function() {
-			var header = $( this ),
-				field = header.data( "field" );
-			var menu = $( "#menu-tmpl" ).tmpl().appendTo( this ).menu({
-				select: function( event, ui ) {
-					source
-						.option( "sort",
-							ui.item.find( "a" ).data( "sort" ) === "asc" ? field : "-" + field )
-						.refresh();
-					menu.hide();
-				}
-			}).popup({
-				trigger: header
-			});
-		});
+		var grid = this.element.data( "grid" );
+		var source = grid.options.source;
+		var headers = this.element.find( "th" );
+		this._hoverable( headers );
+		headers.click( function() {
+			headers.not( this ).removeClass( "sorted sorted-desc" );
+			var column = grid.options.columns[ this.cellIndex ];
+			var sorted = $(this).hasClass("sorted");
+			$( this ).toggleClass("sorted", !sorted).toggleClass("sorted-desc", sorted);
+			source
+				.option( "sort", ( sorted ? "-" : "" ) + column.property )
+				.refresh();
+		}).append( '<span class="ui-icon-asc ui-icon ui-icon-carat-1-n"></span><span class="ui-icon-desc ui-icon ui-icon-carat-1-s"></span>' );
 
 		var thead = this.element.find( "thead" );
 		var inputs = thead.children()
