Skip to content

Commit b32bda6

Browse files
committed
Grid Editing: Add draft for full row editing example. Functional and hacky.
1 parent 66c9313 commit b32bda6

File tree

2 files changed

+100
-0
lines changed

2 files changed

+100
-0
lines changed

grid-editing/grid-row-editing.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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.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="../ui/jquery.ui.position.js"></script>
16+
<script src="../ui/jquery.ui.tooltip.js"></script>
17+
<script src="../grid-spf/datasource.js"></script>
18+
<script src="../grid-spf/datasource-local.js"></script>
19+
<script src="../grid-spf/grid.js"></script>
20+
<script src="../grid-spf/pager.js"></script>
21+
<script src="editor.js"></script>
22+
<script src="grid-editor.js"></script>
23+
<script src="navigator.js"></script>
24+
<script src="localstore.js"></script>
25+
<script src="helpers.js"></script>
26+
<script>
27+
var store = $.demos.localstore( {
28+
key: "grid-editing-developers",
29+
initial: "../grid-spf/developers.json"
30+
});
31+
var localDevelopers = store.load();
32+
33+
$(function() {
34+
var developers = $.ui.localDatasource({
35+
input: localDevelopers,
36+
paging: {
37+
limit: 8
38+
},
39+
objectchange: function(event, ui) {
40+
console.log("developer at index", ui.index, "changed", ui.object);
41+
store.save( localDevelopers );
42+
}
43+
});
44+
45+
var grid = $.ui.grid( {
46+
source: developers
47+
}, "#developers-local" );
48+
49+
// TODO refactor this - there must be a better way to reuse the editor
50+
$.widget("ui.rowEditor", $.ui.editor, {
51+
start: function() {
52+
if (this.input.is(":visible")) {
53+
$.ui.editor.prototype.submit.apply(this, arguments);
54+
return;
55+
}
56+
this._super("start");
57+
},
58+
submit: $.noop,
59+
cancel: $.noop
60+
});
61+
62+
grid.element.delegate( "button.edit", "click", function() {
63+
// TODO pass through data-type to editor
64+
// TODO refactor, see above
65+
// TODO update the object when disabling editor, trigger events
66+
$(this).parents("tr").find("td:not(:has(button))").rowEditor().rowEditor("start").first().find("input").focus();
67+
});
68+
69+
developers.refresh();
70+
});
71+
</script>
72+
<style>
73+
</style>
74+
</head>
75+
<body>
76+
77+
<h1>Grids with full row inline editing</h1>
78+
79+
<table id="developers-local">
80+
<thead>
81+
<tr>
82+
<th data-field="firstName">First Name</th>
83+
<th data-field="lastName">Last Name</th>
84+
<th data-field="country">Country</th>
85+
<th data-field="bitcoins" data-type="number">Bitcoins</th>
86+
<th data-field="random.value" data-type="number">Random</th>
87+
<th data-template="#cell-edit-tmpl">Edit</th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
</tbody>
92+
</table>
93+
94+
<script id="cell-edit-tmpl" type="text/x-jquery-tmpl">
95+
<td><button class='edit'>Toggle Edit</button></td>
96+
</script>
97+
98+
</body>
99+
</html>

grid-editing/grid.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
grid.element.gridEditor({
7070
items: "td:not(:has(button))",
7171
type: function(cell) {
72+
// TODO should be possible to retrieve this from grid.options.columns
7273
return grid.element.find( "th" ).eq( cell[ 0 ].cellIndex ).data( "type" );
7374
},
7475
submit: function( event, ui) {

0 commit comments

Comments
 (0)