Permalink
Browse files

New $.dataSource() plug-in with accompanying sample.

  • Loading branch information...
1 parent 2e4aca3 commit f0c44e0e6d8414bdd739133f79374e4121d71d5b Brad Olenick committed Mar 2, 2011
Showing with 562 additions and 1 deletion.
  1. +146 −0 grid-datamodel2/DataSourceSample.html
  2. +2 −1 grid-datamodel2/grid.js
  3. +414 −0 grid-datamodel2/jquery.datasource.js
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Grid: Data</title>
+ <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
+ <link rel="stylesheet" href="grid.css">
+ <script src="../jquery-1.4.4.js"></script>
+ <script src="jquery.tmpl.js"></script>
+ <script src="jquery.tmplPlus.js"></script>
+ <script src="../ui/jquery.ui.core.js"></script>
+ <script src="../ui/jquery.ui.widget.js"></script>
+ <script src="grid.js"></script>
+ <script src="jquery.datalink2.js"></script>
+ <script src="jquery.datasource.js"></script>
+
+ <script>
+
+ var localDevelopers = [
+ {
+ firstName: "Scott",
+ lastName: "González",
+ country: "USA",
+ twitter: "scott_gonzalez",
+ github: "scottgonzalez"
+ },
+ {
+ firstName: "Richard",
+ lastName: "Worth",
+ country: "USA",
+ twitter: "rworth",
+ github: "rdworth"
+ },
+ {
+ firstName: "Jörn",
+ lastName: "Zaefferer",
+ country: "Germany",
+ twitter: "bassistance",
+ github: "jzaefferer"
+ }
+ ];
+
+ $(function() {
+ // We'll bind this array to a dataSource, which will control the array's contents.
+ var filteredLocalDevelopers = [];
+
+ // Bind a grid to filteredLocalDevelopers. The grid will react to array changes.
+ // Notice that the grid has no awareness of a dataSource.
+ // You can imagine a paging control that _would_ be aware of an ambient dataSource and would dynamically change query
+ // options (like we do in #filterDevelopers below) to change the contents of an array to which a grid is bound.
+ var developersGrid = $( "#developers-remote" ).grid({
+ columns: [ "firstName", "lastName", "country" ],
+ source: filteredLocalDevelopers
+ }).data( "grid" );
+ developersGrid.source = filteredLocalDevelopers; // TODO -- The widget factory deeply copies options, which loses filteredLocalDevelopers.
+
+ // The dataSource bound to filteredLocalDevelopers controls its contents.
+ // The "inputArray" option causes the dataSource to apply query options locally on refresh().
+ // We'll dynamically reconfigure the filter on this dataSource to change the contents of filteredLocalDevelopers.
+ $([ filteredLocalDevelopers ]).dataSource({
+ inputArray: localDevelopers,
+ refresh: function () { // With grid use data-linking to collections, this wouldn't be needed.
+ developersGrid.refresh();
+ }
+ }).refresh(); // refresh() causes the dataSource to update the contents of the array to which it's bound.
+
+ // Dynamically configure the query options on the dataSource. refresh() to update the array contents.
+ var filtered;
+ $("#filterDevelopers").click(function () {
+ if (filtered) {
+ $([ filteredLocalDevelopers ]).dataSource().option("filter").refresh(); // No r-value means unset.
+ } else {
+ $([ filteredLocalDevelopers ]).dataSource().option("filter", { property: "firstName", value: "Richard" }).refresh();
+ }
+ filtered = !filtered;
+ $("#filterDevelopers").val(filtered ? "Remove filter" : "Filter developers");
+ });
+
+ // A similar example...but with server integration and remote queries.
+ var genres = [];
+ var genresGrid = $( "#genres" ).grid({
+ columns: [ "Name" ],
+ source: genres
+ }).data( "grid" );
+ genresGrid.source = genres; // TODO -- The widget factory deeply copies options, which loses genres.
+
+ // No "inputArray" option means the dataSource should bind to remote data, employing options.urlMapper to render query options
+ // into a URL to $.ajax. I stole this urlMapper technique from Boris' earlier data model prototype.
+ $([ genres ]).dataSource($.extend({}, $.dataSource.oDataSettings, {
+ path: "http://odata.netflix.com/Catalog/Genres",
+ refresh: function () { // With grid use data-linking to collections, this wouldn't be needed.
+ genresGrid.refresh();
+ },
+ paging: { take: 10 }
+ })).refresh();
+
+ var sorted;
+ $("#sortGenres").click(function () {
+ if (sorted) {
+ $([ genres ]).dataSource().option("sort").refresh();
+ } else {
+ $([ genres ]).dataSource().option("sort", { property: "Name", direction: "desc" }).refresh();
+ }
+ sorted = !sorted;
+ $("#sortGenres").val(sorted ? "Remove sort" : "Sort genres");
+ });
+ });
+ </script>
+</head>
+<body>
+
+
+<h2>local data source</h2>
+<p>
+<table id="developers-remote">
+ <thead>
+ <tr>
+ <th data-field="firstName">First Name</th>
+ <th data-field="lastName">Last Name</th>
+ <th data-field="country">Country</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+</table>
+</p>
+
+<p><input id="filterDevelopers" type="button" value="Filter developers"></input></p>
+
+<h2>remote data source</h2>
+<p>
+<table id="genres">
+ <thead>
+ <tr>
+ <th data-field="Name">Name</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+</table>
+</p>
+
+<p><input id="sortGenres" type="button" value="Sort genres"></input></p>
+
+</body>
+</html>
View
@@ -14,7 +14,8 @@ $.widget( "ui.grid", {
options: {
columns: null,
type: null,
- rowTemplate: null
+ rowTemplate: null,
+ editable: []
},
_create: function() {
var that = this;
Oops, something went wrong.

0 comments on commit f0c44e0

Please sign in to comment.