Skip to content

Commit cfd47b9

Browse files
jzaeffererjzaefferer
committed
Added basic editing test.
1 parent d8c10f2 commit cfd47b9

File tree

4 files changed

+110
-4
lines changed

4 files changed

+110
-4
lines changed

‎tests/visual/grid/datasort.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Grid: Type</title>
4+
<title>Grid: Sorting grid</title>
55
<meta charset=utf-8 />
66
<link rel="stylesheet" href="../visual.css" />
77
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" title="ui-theme" />

‎tests/visual/grid/datasource.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,21 @@
2424
if ($.isArray( this.options.source ) ) {
2525
// TODO pass this (as the datasource instance) instead of type?
2626
store._populate( this.options.type, this.options.source );
27+
} else if ( $.type( this.options.source ) == "string" ) {
28+
var that = this;
29+
$.getJSON( this.options.source, {}, function(data) {
30+
store._populate( that.options.type, data );
31+
// TODO replace this workaround with proper notifications or async handling
32+
$("table").grid("refresh");
33+
});
2734
} else if ( $.isFunction( this.options.source ) ) {
2835
var that = this;
2936
this.options.source( {}, function(data) {
3037
store._populate( that.options.type, data );
31-
// TODO replace this workaround with proper notifications or async handling
38+
// TODO see above
3239
$("table").grid("refresh");
3340
});
3441
}
35-
// TODO typeof source == "string" => $.getJSON(source)?
3642
},
3743
save: function( items ) {
3844
$.each( items, function( itemId, item ) {

‎tests/visual/grid/form-editing.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Grid: Editing</title>
6+
<link rel="stylesheet" href="../visual.css" />
7+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
8+
<link rel="stylesheet" href="grid.css" />
9+
<script src="../../../jquery-1.4.4.js"></script>
10+
<script src="../../../external/jquery.tmpl.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="dataitem.js"></script>
15+
<script src="datasource.js"></script>
16+
<script src="datastore.js"></script>
17+
<script src="grid.js"></script>
18+
<script>
19+
$.ui.dataitem.extend( "developer", {});
20+
$.ui.datasource({
21+
type: "developer",
22+
source: "fixture.json"
23+
});
24+
25+
$(function() {
26+
$( "#developers" ).grid({
27+
type: "developer",
28+
select: showDetails,
29+
columns: ["firstName", "lastName", "country"]
30+
});
31+
32+
var formItem;
33+
var form = $( "#developer" ).submit( function(event) {
34+
event.preventDefault();
35+
var serialized = $( this ).children("form").serializeArray();
36+
var item = $.ui.datastore.main.get( "developer", formItem.options.data.guid ).options.data;
37+
$.map(serialized, function(field) {
38+
item[field.name] = field.value;
39+
});
40+
$( "table" ).grid( "refresh" );
41+
form.empty();
42+
});
43+
function showDetails( event, ui ) {
44+
formItem = ui.item;
45+
$( "#developer-tmpl" )
46+
// TODO accessing data though item.options makes no sense
47+
// this should be just ui.item passed to .tmpl
48+
.tmpl( ui.item.options.data )
49+
.appendTo( form.empty() );
50+
51+
}
52+
});
53+
</script>
54+
</head>
55+
<body>
56+
57+
<h2>remote data source, editing</h2>
58+
<table id="developers">
59+
<thead>
60+
<tr>
61+
<th data-field="firstName">First Name</th>
62+
<th data-field="lastName">Last Name</th>
63+
<th data-field="country">Country</th>
64+
</tr>
65+
</thead>
66+
<tbody>
67+
</tbody>
68+
</table>
69+
70+
<div id="developer"></div>
71+
72+
<script type="text/x-jquery-tmpl" id="developer-tmpl">
73+
<form>
74+
<legend>Edit</legend>
75+
<div>
76+
<label>Firstname: </label>
77+
<input name="firstName" value="${firstName}" />
78+
</div>
79+
<div>
80+
<label>Lastname: </label>
81+
<input name="lastName" value="${lastName}" />
82+
</div>
83+
<div>
84+
<label>GitHub username: </label>
85+
<input name="github" value="${github}" />
86+
</div>
87+
<div>
88+
<label>Twitter username: </label>
89+
<input name="twitter" value="${twitter}" />
90+
</div>
91+
<div>
92+
<label>Country: </label>
93+
<input name="country" value="${country}" />
94+
</div>
95+
<input type="submit" />
96+
</form>
97+
</script>
98+
99+
</body>
100+
</html>

‎tests/visual/grid/remote-source.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Grid: Type</title>
4+
<title>Grid: Remote data source</title>
55
<meta charset=utf-8 />
66
<link rel="stylesheet" href="../visual.css" />
77
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" title="ui-theme" />

0 commit comments

Comments
 (0)