Skip to content

Commit 08f57c2

Browse files
jzaeffererjzaefferer
committed
Grid Editing/Selecting: Fork main editing demo with support for selectable (not compatible with cell navigation widget, yet). Implement selection state in separate object, accessed via $.observable.
1 parent fdf7e63 commit 08f57c2

File tree

3 files changed

+237
-140
lines changed

3 files changed

+237
-140
lines changed

‎grid-editing/grid-selectable.html

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Grid: Editing, Inline Grid</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.6.2.js"></script>
9+
<script src="../external/globalize.js"></script>
10+
<script src="../external/jquery.tmpl.js"></script>
11+
<script src="../external/jquery.mousewheel-3.0.4.js"></script>
12+
<script src="../ui/jquery.ui.core.js"></script>
13+
<script src="../ui/jquery.ui.widget.js"></script>
14+
<script src="../ui/jquery.ui.button.js"></script>
15+
<script src="../ui/jquery.ui.spinner.js"></script>
16+
<script src="../ui/jquery.ui.position.js"></script>
17+
<script src="../ui/jquery.ui.tooltip.js"></script>
18+
<script src="../ui/jquery.ui.autocomplete.js"></script>
19+
<script src="../ui/jquery.ui.menu.js"></script>
20+
<script src="../ui/jquery.ui.mouse.js"></script>
21+
<script src="../ui/jquery.ui.selectable.js"></script>
22+
<script src="../grid-spf/datasource.js"></script>
23+
<script src="../grid-spf/datasource-local.js"></script>
24+
<script src="../grid-spf/grid.js"></script>
25+
<script src="../grid-spf/pager.js"></script>
26+
<script src="observable.js"></script>
27+
<script src="navigator.js"></script>
28+
<script src="localstore.js"></script>
29+
<script src="helpers.js"></script>
30+
<script>
31+
if ( !window.console ) {
32+
window.console = {
33+
log: function() {
34+
var message = Array.prototype.slice.call( arguments, 1 ).join( ", " );
35+
$("<div>").text( message ).appendTo("body");
36+
}
37+
}
38+
}
39+
40+
var store = $.demos.localstore( {
41+
key: "grid-editing-developers",
42+
initial: "../grid-spf/developers.json"
43+
});
44+
var localDevelopers = store.load();
45+
46+
$(function() {
47+
var developers = $.ui.localDatasource({
48+
input: localDevelopers,
49+
paging: {
50+
limit: 8
51+
}
52+
});
53+
var selected = [];
54+
developers.save = function() {
55+
store.save( localDevelopers );
56+
return this;
57+
}
58+
// TODO $.observable should support this binding, along with a less intrusive event facility
59+
function bindChange(index, developer) {
60+
$.observable( developer ).bind("change", function(event, ui) {
61+
developers.refresh().save();
62+
});
63+
}
64+
$.observable( localDevelopers ).bind("insert remove", function(event, ui) {
65+
if ( event.type === "insert" ) {
66+
$.each( ui.items, bindChange );
67+
}
68+
developers.refresh().save();
69+
})
70+
$.each( localDevelopers, bindChange );
71+
72+
var grid = $( "#developers-local" ).grid({
73+
source: developers
74+
});
75+
76+
developers.element.bind("datasourceresponse", function() {
77+
grid.find("tbody > tr").each(function() {
78+
if ( $.inArray( $( this ).data("grid-item"), selected ) !== -1 ) {
79+
$( this ).addClass("ui-selected");
80+
}
81+
});
82+
});
83+
grid.selectable({
84+
filter: "tr",
85+
start: function( ev, eventArgs ) {
86+
// If ctrlKey not true, remove any other items in selected
87+
// which may be on other pages than the current one.
88+
if ( !ev.ctrlKey ) {
89+
$.observable( selected ).remove( 0, selected.length );
90+
}
91+
},
92+
selected: function( ev, ui ) {
93+
var item = $(ui.selected).data("grid-item");
94+
if ( $.inArray( item, selected ) === -1 ) {
95+
$.observable( selected ).insert( item );
96+
}
97+
},
98+
unselected: function( ev, ui ) {
99+
var item = $(ui.selected).data("grid-item");
100+
$.observable( selected ).remove( item );
101+
}
102+
});
103+
104+
$( "#pageDevelopers" ).pager({
105+
source: developers
106+
});
107+
108+
function newDeveloper() {
109+
return {
110+
firstName: [ "Peter", "Unknown", "Carl" ][ Math.floor( Math.random() * 3 ) ],
111+
lastName: [ "Pan", "Unkown", "Worth" ][ Math.floor( Math.random() * 3 ) ],
112+
country: [ "Unknown", "Pandistan", "Petertan" ][ Math.floor( Math.random() * 3 ) ],
113+
bitcoins: Math.floor( Math.random() * 1500 ),
114+
random: {
115+
value: Math.floor( Math.random() * 13 )
116+
}
117+
}
118+
}
119+
$( "#addDeveloper" ).click( function() {
120+
var insertAt = 0;
121+
if ( selected.length ) {
122+
insertAt = $.inArray( selected[ 0 ], localDevelopers );
123+
}
124+
$.observable( localDevelopers ).insert( insertAt, newDeveloper() );
125+
});
126+
$( "#addDeveloperAfter" ).click( function() {
127+
var insertAt = localDevelopers.length;
128+
if ( selected.length ) {
129+
insertAt = $.inArray( selected[ selected.length - 1 ], localDevelopers ) + 1;
130+
}
131+
$.observable( localDevelopers ).insert( insertAt, newDeveloper() );
132+
});
133+
134+
// TODO support editing multiple objects at once
135+
var developer;
136+
$( "#editDeveloper" ).click( function() {
137+
if ( !selected.length ) {
138+
alert( "None selected" );
139+
return;
140+
}
141+
developer = selected[0];
142+
$( "#edit-tmpl" ).tmpl( meta(developer) ).appendTo( editForm.find("fieldset").empty() );
143+
editForm.show().find("input:first").focus();
144+
});
145+
var editForm = $( "#editForm" ).tooltip().hide().submit( function( event ) {
146+
event.preventDefault();
147+
$.observable(developer).property( serializeForm( this ) );
148+
editForm.hide();
149+
});
150+
151+
$( "#removeDeveloper" ).click( function() {
152+
if ( !selected.length ) {
153+
alert( "None selected" );
154+
return;
155+
}
156+
var developer = $( this ).closest("tr").data( "grid-item" );
157+
$.each( selected, function( index, developer ) {
158+
$.observable( localDevelopers ).remove( developer );
159+
});
160+
developers.refresh();
161+
});
162+
163+
$( "#clearSelection" ).click( function() {
164+
$.observable( selected ).remove( 0, selected.length );
165+
developers.refresh();
166+
});
167+
168+
developers.refresh();
169+
});
170+
</script>
171+
<style>
172+
.ui-selecting td { background: #eef; }
173+
.ui-selected td { background: #ddf; }
174+
.navigator-active { background: rgba(0,0,255,0.5) !important; }
175+
.ui-autocomplete { width: 200px; max-height: 200px; overflow: auto; }
176+
</style>
177+
</head>
178+
<body>
179+
180+
<h1>Grids with editable local datasource</h1>
181+
182+
<h2>local data source</h2>
183+
<p id="pageDevelopers">
184+
<button data-page="first">First</button>
185+
<button data-page="prev">Prev</button>
186+
<button data-page="prevStep">-1</button>
187+
<span>
188+
Page <input class="current" size="4"/>/<span class="total">0</span>,
189+
Total records <span class="totalRecords">0</span>
190+
</span>
191+
<button data-page="nextStep">+1</button>
192+
<button data-page="next">Next</button>
193+
<button data-page="last">Last</button>
194+
</p>
195+
<table id="developers-local">
196+
<thead>
197+
<tr>
198+
<th data-property="firstName">First Name</th>
199+
<th data-property="lastName">Last Name</th>
200+
<th data-property="country">Country</th>
201+
<th data-property="bitcoins" data-type="number">Bitcoins</th>
202+
<th data-property="random.value" data-type="number">Random</th>
203+
</tr>
204+
</thead>
205+
<tbody>
206+
</tbody>
207+
</table>
208+
209+
<div>
210+
<button id="addDeveloper">Insert new developer before selection (start if none selected)</button>
211+
<button id="addDeveloperAfter">Insert new developer after selection (end if none selected)</button>
212+
</div>
213+
<div>
214+
<button id="editDeveloper">Edit selected developer</button>
215+
<button id="removeDeveloper">Remove selected developer</button>
216+
<button id="clearSelection">Clear selection</button>
217+
</div>
218+
<form id="editForm">
219+
<fieldset>
220+
</fieldset>
221+
<input type="submit" value="Save changes" />
222+
</form>
223+
<script id="edit-tmpl" type="text/x-jquery-tmpl">
224+
{{if $.isArray(value)}}
225+
<ul>
226+
{{each(index, valueX) value}}
227+
<li><input type="text" name="${name}" placeholder="${label}" value="${valueX}" title="${label}" /></li>
228+
{{/each}}
229+
</ul>
230+
{{else}}
231+
<input type="text" name="${name}" placeholder="${label}" value="${value}" title="${label}" />
232+
{{/if}}
233+
</script>
234+
235+
</body>
236+
</html>

‎grid-editing/grid.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@
134134
<h1>Grids with editable local datasource</h1>
135135

136136
<h2>local data source</h2>
137+
<p>See also <a href="grid-selectable.html">grid-selectable</a></p>
137138
<p id="pageDevelopers">
138139
<button data-page="first">First</button>
139140
<button data-page="prev">Prev</button>

‎grid-selecting/grid.html

Lines changed: 0 additions & 140 deletions
This file was deleted.

0 commit comments

Comments
 (0)