Grid SPF: Sync filters with location.hash to share interesting results easily

Author: jzaefferer

grid-spf/menugrid.html

@@ -21,8 +21,27 @@
 	<script>
 	$(function() {
 		var movies = $.ui.odataDatasource({
-			resource: "http://odata.netflix.com/Catalog/Titles"
+			resource: "http://odata.netflix.com/Catalog/Titles",
+			request: function() {
+				if (this.options.filter) {
+					// JSON is far from optimal for URI-encoding, but easy to implement
+					location.hash = encodeURIComponent( JSON.stringify( this.options.filter ) );
+				} else {
+					location.hash = "";
+				}
+			}
 		});
+
+		function checkHash() {
+			if (location.hash && location.hash.length > 1) {
+				movies.option("filter", JSON.parse( decodeURIComponent( location.hash.substring( 1 ) ) ) ).refresh();
+			} else {
+				movies.option("filter", null).refresh();
+			}
+		}
+		checkHash();
+		$( window ).bind( "hashchange", checkHash );
+
 		var grid = $( "#movies" ).grid({
 			source: movies,
 			refresh: function() {
@@ -135,5 +154,12 @@ <h2>Movies! Click headers to sort, use inputs for filtering, pager for paging</h
 	</tfoot>
 </table>
 
+<h3>Some fun results</h3>
+<ul>
+	<li><a href="#%7B%22AverageRating%22%3A%7B%22operator%22%3A%22%3C%3D%22%2C%22value%22%3A1%7D%7D">Bad movies</a></li>
+	<li><a href="#%7B%22ReleaseYear%22%3A%7B%22operator%22%3A%22%3D%3D%22%2C%22value%22%3A1997%7D%2C%22AverageRating%22%3A%7B%22operator%22%3A%22%3E%22%2C%22value%22%3A4.1%7D%7D">Party like its 1997</a></li>
+	<li><a href="#">Clear filters</a></li>
+</ul>
+
 </body>
 </html>

grid-spf/menugrid.js

@@ -22,9 +22,10 @@ $.widget("spf.menugrid", {
 				.removeAttr("tabindex")
 				.each(function() {
 					$( "<input>" ).appendTo( $( this ).empty() );
-				});
+				})
+				.find( "input" );
 
-		inputs.find( "input" ).bind( "change", function() {
+		inputs.bind( "change", function() {
 			var column = grid.options.columns[ this.parentNode.cellIndex ],
 				value = this.value,
 				operator;
@@ -50,6 +51,29 @@ $.widget("spf.menugrid", {
 				source.option( "filter." + column.property, null );
 			}
 			source.refresh();
-		});
+		})
+
+		function updateFilterValues() {
+			if (source.options.filter) {
+				var filters = source.options.filter;
+				inputs.each( function() {
+					var column = grid.options.columns[ this.parentNode.cellIndex ];
+					for ( property in filters ) {
+						if ( property == column.property ) {
+							var filter = filters[property];
+							var output = filter.value;
+							if ( filter.operator !== "==" ) {
+								output = filter.operator + output;
+							}
+							$( this ).val( output );
+						}
+					}
+				});
+			} else {
+				inputs.val("");
+			}
+		}
+		source.element.bind( "datasourcerequest", updateFilterValues );
+		updateFilterValues();
 	}
 });