Skip to content

Commit d8aedc3

Browse files
committed
Grid SPF: Sync filters with location.hash to share interesting results easily
1 parent 2297844 commit d8aedc3

File tree

2 files changed

+54
-4
lines changed

2 files changed

+54
-4
lines changed

grid-spf/menugrid.html

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,27 @@
2121
<script>
2222
$(function() {
2323
var movies = $.ui.odataDatasource({
24-
resource: "http://odata.netflix.com/Catalog/Titles"
24+
resource: "http://odata.netflix.com/Catalog/Titles",
25+
request: function() {
26+
if (this.options.filter) {
27+
// JSON is far from optimal for URI-encoding, but easy to implement
28+
location.hash = encodeURIComponent( JSON.stringify( this.options.filter ) );
29+
} else {
30+
location.hash = "";
31+
}
32+
}
2533
});
34+
35+
function checkHash() {
36+
if (location.hash && location.hash.length > 1) {
37+
movies.option("filter", JSON.parse( decodeURIComponent( location.hash.substring( 1 ) ) ) ).refresh();
38+
} else {
39+
movies.option("filter", null).refresh();
40+
}
41+
}
42+
checkHash();
43+
$( window ).bind( "hashchange", checkHash );
44+
2645
var grid = $( "#movies" ).grid({
2746
source: movies,
2847
refresh: function() {
@@ -135,5 +154,12 @@ <h2>Movies! Click headers to sort, use inputs for filtering, pager for paging</h
135154
</tfoot>
136155
</table>
137156

157+
<h3>Some fun results</h3>
158+
<ul>
159+
<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>
160+
<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>
161+
<li><a href="#">Clear filters</a></li>
162+
</ul>
163+
138164
</body>
139165
</html>

grid-spf/menugrid.js

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@ $.widget("spf.menugrid", {
2222
.removeAttr("tabindex")
2323
.each(function() {
2424
$( "<input>" ).appendTo( $( this ).empty() );
25-
});
25+
})
26+
.find( "input" );
2627

27-
inputs.find( "input" ).bind( "change", function() {
28+
inputs.bind( "change", function() {
2829
var column = grid.options.columns[ this.parentNode.cellIndex ],
2930
value = this.value,
3031
operator;
@@ -50,6 +51,29 @@ $.widget("spf.menugrid", {
5051
source.option( "filter." + column.property, null );
5152
}
5253
source.refresh();
53-
});
54+
})
55+
56+
function updateFilterValues() {
57+
if (source.options.filter) {
58+
var filters = source.options.filter;
59+
inputs.each( function() {
60+
var column = grid.options.columns[ this.parentNode.cellIndex ];
61+
for ( property in filters ) {
62+
if ( property == column.property ) {
63+
var filter = filters[property];
64+
var output = filter.value;
65+
if ( filter.operator !== "==" ) {
66+
output = filter.operator + output;
67+
}
68+
$( this ).val( output );
69+
}
70+
}
71+
});
72+
} else {
73+
inputs.val("");
74+
}
75+
}
76+
source.element.bind( "datasourcerequest", updateFilterValues );
77+
updateFilterValues();
5478
}
5579
});

0 commit comments

Comments
 (0)