Skip to content

Commit 2df6edb

Browse files
jzaeffererjzaefferer
committed
Grid Editing: Extract a few helpers from grid example, reuse in non-grid editing example
1 parent f04f7fa commit 2df6edb

File tree

5 files changed

+205
-36
lines changed

5 files changed

+205
-36
lines changed

‎grid-editing/grid.html

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script src="../grid-spf/pager.js"></script>
1919
<script src="editor.js"></script>
2020
<script src="localstore.js"></script>
21+
<script src="helpers.js"></script>
2122
<script>
2223
var store = $.demos.localstore( {
2324
key: "grid-editing-developers",
@@ -54,46 +55,22 @@
5455
});
5556
}
5657
}).data("grid");
58+
5759
// TODO find a better way to add markup to the generated row template
5860
grid.options.rowTemplate = grid.options.rowTemplate.substring( 0, grid.options.rowTemplate.length - 35 )
5961
+ "<button class='edit'>Edit</button></td>"
6062
+ "<td><button class='remove'>Remove</button></td></tr>";
6163

62-
function set(object, name, value) {
63-
var fields = name.split("."),
64-
target = object,
65-
field;
66-
while (fields.length > 1) {
67-
field = fields.shift(),
68-
target = target[field];
69-
}
70-
target[fields[0]] = value;
71-
}
72-
function get(object, name) {
73-
var fields = name.split("."),
74-
target = object,
75-
field;
76-
while (fields.length > 1) {
77-
field = fields.shift(),
78-
target = target[field];
79-
}
80-
return target[fields[0]];
81-
}
82-
8364
var developer;
8465
var editForm = $( "#editForm" ).hide().submit( function( event ) {
8566
event.preventDefault();
86-
$.each( $( this ).serializeArray(), function( index, object ) {
87-
set( developer, object.name, object.value );
88-
});
67+
serializeForm( this, developer );
8968
developers.save().refresh();
9069
editForm.hide();
9170
});
9271
grid.element.delegate( "button.edit", "click", function() {
9372
developer = $( this ).tmplItem().data;
94-
$("input:text", editForm).each(function() {
95-
$(this).val(get(developer, this.name));
96-
});
73+
deserializeForm( editForm, developer );
9774
editForm.show();
9875
});
9976
grid.element.delegate( "button.remove", "click", function() {
@@ -151,6 +128,7 @@ <h2>local data source</h2>
151128
<th data-field="lastName">Last Name</th>
152129
<th data-field="country">Country</th>
153130
<th data-field="bitcoins" data-type="number">Bitcoins</th>
131+
<th data-field="random.value" data-type="number">Random</th>
154132
<th>Edit</th>
155133
<th>Remove</th>
156134
</tr>
@@ -166,6 +144,7 @@ <h2>local data source</h2>
166144
<input type="text" name="firstName" placeholder="Firstname" />
167145
<input type="text" name="lastName" placeholder="Lastname" />
168146
<input type="text" name="country" placeholder="Country" />
147+
<input type="text" name="random.value" placeholder="Random Value" />
169148
<input type="submit" value="Save changes" />
170149
</form>
171150

‎grid-editing/helpers.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// demo helpers, may become part of some abstraction later
2+
3+
function set(object, name, value) {
4+
var fields = name.split("."),
5+
field = fields.pop();
6+
get(object, fields)[field] = value;
7+
}
8+
function get(object, name) {
9+
var fields = $.type(name) === "string" ? name.split(".") : name,
10+
field;
11+
if (fields.length === 0) {
12+
return object;
13+
}
14+
while (fields.length > 1) {
15+
field = fields.shift(),
16+
object = object[field];
17+
}
18+
return object[fields[0]];
19+
}
20+
21+
function serializeForm(form, target) {
22+
$.each( $( form ).serializeArray(), function( index, object ) {
23+
set( target, object.name, object.value );
24+
});
25+
}
26+
function deserializeForm(form, source) {
27+
$(form).find("input:text").each(function() {
28+
$(this).val(get(source, this.name));
29+
});
30+
}

‎grid-editing/master-detail.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Grid: Editing, Master/Detail</title>
6+
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
7+
<link rel="stylesheet" href="../grid-spf/grid.css">
8+
<script src="../jquery-1.5.1.js"></script>
9+
<script src="../external/jquery.tmpl.js"></script>
10+
<script src="../external/jquery.mousewheel-3.0.4.js"></script>
11+
<script src="../ui/jquery.ui.core.js"></script>
12+
<script src="../ui/jquery.ui.widget.js"></script>
13+
<script src="../ui/jquery.ui.button.js"></script>
14+
<script src="../ui/jquery.ui.spinner.js"></script>
15+
<script src="../grid-spf/datasource.js"></script>
16+
<script src="../grid-spf/datasource-local.js"></script>
17+
<script src="localstore.js"></script>
18+
<script src="helpers.js"></script>
19+
<script>
20+
var store = $.demos.localstore( {
21+
key: "grid-editing-movies",
22+
initial: "movies.json"
23+
});
24+
var localMovies = store.load();
25+
26+
$(function() {
27+
var movies = $.ui.localDatasource({
28+
input: localMovies,
29+
paging: {
30+
limit: 8
31+
}
32+
});
33+
movies.save = function() {
34+
store.save( localMovies );
35+
return this;
36+
};
37+
38+
var movie;
39+
var editForm = $( "#editForm" ).hide().submit( function( event ) {
40+
event.preventDefault();
41+
serializeForm( this, movie );
42+
movies.save().refresh();
43+
editForm.hide();
44+
});
45+
var list = $("#movies-list").delegate("li:has(li)", "click", function() {
46+
movie = $( this ).tmplItem().data;
47+
deserializeForm( editForm, movie );
48+
editForm.show();
49+
});
50+
$(movies).bind("datasourceresponse", function() {
51+
list.empty().append( $("#movie-list-item").tmpl( localMovies ) );
52+
});
53+
54+
$("#addMovie").click(function() {
55+
localMovies.push({
56+
title: "New Movie",
57+
alternative_titles: [],
58+
languages: [{
59+
name: "English"
60+
}]
61+
});
62+
movies.save().refresh();
63+
});
64+
65+
$("#editForm").hide();
66+
67+
movies.refresh();
68+
});
69+
</script>
70+
</head>
71+
<body>
72+
73+
<h1>Non-grid master/details editing</h1>
74+
75+
<ul id="movies-list">
76+
77+
</ul>
78+
79+
<script id="movie-list-item" type="text/x-jquery-tmpl">
80+
<li>
81+
<span>${title}, released ${released}, available in:</span>
82+
<ul>
83+
{{each(index, language) languages}}
84+
<li>${name}</li>
85+
{{/each}}
86+
</ul>
87+
</li>
88+
</script>
89+
90+
<div>
91+
<button id="addMovie">Insert new movie</button>
92+
</div>
93+
<form id="editForm">
94+
<input type="text" name="title" placeholder="Title" />
95+
<input type="text" name="released" placeholder="Release Year" />
96+
<!--
97+
<input type="text" name="alternative_titles" size="30" placeholder="Alternative Titles" />
98+
<input type="text" name="languages" placeholder="Languages" />
99+
-->
100+
<input type="submit" value="Save changes" />
101+
</form>
102+
103+
</body>
104+
</html>

‎grid-editing/movies.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
[
2+
{
3+
"title": "Meet Joe Black",
4+
"released": 1990,
5+
"alternative_titles": ["met joe black", "joe's black"],
6+
"languages": [
7+
{ "name": "English" },
8+
{ "name": "French" }
9+
]
10+
},
11+
{
12+
"title": "Eyes Wide Shut",
13+
"released": 1991,
14+
"alternative_titles": ["Eyes Very Wide Shut"],
15+
"languages": [
16+
{ "name": "French" },
17+
{ "name": "German" },
18+
{ "name": "Spanish" }
19+
]
20+
},
21+
{
22+
"title": "Spiderman 3",
23+
"released": 1992,
24+
"alternative_titles": ["The Third", "Der Dritte", "Trio"],
25+
"languages": [
26+
{ "name": "English" },
27+
{ "name": "French" },
28+
{ "name": "German" },
29+
{ "name": "Spanish" }
30+
]
31+
}
32+
]

‎grid-spf/developers.json

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,62 +5,86 @@
55
"country": "USA",
66
"twitter": "rworth",
77
"github": "rdworth",
8-
"bitcoins": 150
8+
"bitcoins": 150,
9+
"random": {
10+
"value": 10
11+
}
912
},
1013
{
1114
"firstName": "Scott",
1215
"lastName": "González",
1316
"country": "USA",
1417
"twitter": "scott_gonzalez",
1518
"github": "scottgonzalez",
16-
"bitcoins": 10
19+
"bitcoins": 10,
20+
"random": {
21+
"value": 20
22+
}
1723
},
1824
{
1925
"firstName": "Jörn",
2026
"lastName": "Zaefferer",
2127
"country": "Germany",
2228
"twitter": "bassistance",
2329
"github": "jzaefferer",
24-
"bitcoins": 1
30+
"bitcoins": 1,
31+
"random": {
32+
"value": 30
33+
}
2534
},
2635
{
2736
"firstName": "Carl",
2837
"lastName": "Worth",
2938
"country": "Canada",
3039
"twitter": "cworth",
3140
"github": "cworth",
32-
"bitcoins": 1500
41+
"bitcoins": 1500,
42+
"random": {
43+
"value": 40
44+
}
3345
},
3446
{
3547
"firstName": "Adam",
3648
"lastName": "Piano",
3749
"country": "USA",
3850
"twitter": "ajpiano",
3951
"github": "ajpiano",
40-
"bitcoins": 1337
52+
"bitcoins": 1337,
53+
"random": {
54+
"value": 50
55+
}
4156
},
4257
{
4358
"firstName": "Remy",
4459
"lastName": "Sharp",
4560
"country": "UK",
4661
"twitter": "rem",
4762
"github": "rem",
48-
"bitcoins": 55.5
63+
"bitcoins": 55.5,
64+
"random": {
65+
"value": 60
66+
}
4967
},
5068
{
5169
"firstName": "Benjamin",
5270
"lastName": "Lupton",
5371
"country": "Australia",
5472
"twitter": "balupton",
5573
"github": "balupton",
56-
"bitcoins": 2501
74+
"bitcoins": 2501,
75+
"random": {
76+
"value": 70
77+
}
5778
},
5879
{
5980
"firstName": "Haymo",
6081
"lastName": "Meran",
6182
"country": "Austria",
6283
"twitter": "draftkraft",
6384
"github": "",
64-
"bitcoins": 0
85+
"bitcoins": 0,
86+
"random": {
87+
"value": 80
88+
}
6589
}
66-
]
90+
]

0 commit comments

Comments
 (0)