-
Notifications
You must be signed in to change notification settings - Fork 370
/
index.html
527 lines (496 loc) · 32.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Table Drag and Drop jQuery plugin</title>
<link rel="stylesheet" href="tablednd.css" type="text/css"/>
<link rel="stylesheet" href="//google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css"/>
</head>
<body>
<div id="page">
<h1>Table Drag and Drop jQuery plugin</h1>
<p>This page contains documentation and tests for the TableDnD jQuery plug-in. For more information and
to post comments, please go to <a href="http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/">isocra.com</a>.
</p>
<p>If you have issues or bug reports, then you can post them at the <a href="https://github.com/isocra/TableDnD">TableDnD plug page</a>.</p>
<h2>How do I use it?</h2>
<ol>
<li>Since TableDnD is a jquery plugin you will need to include jquery in your page first.
<p>No need for any downloads simply reference <a href="https://developers.google.com/speed/libraries/devguide#jquery">jQuery from the Google CDN</a>
(Content Distribution Network)
All scripts are included at the bottom of the page, to facilitate quicker rendering of the HTML for more responsive pages.
The following is the way we are linking to jQuery in the examples and this method can be recommended for use in your implementations too.</p>
<pre class="prettyprint"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></pre></li>
<li>You will also need a copy of the <a href="https://github.com/isocra/TableDnD">TableDnD plugin</a> (current version 0.9) which you can reference in
the normal fashion, anywhere after jQuery.</li>
<li>In true jQuery style, the typical way to initialise the tabes is in the <code class="prettyprint">$(document).ready</code> code black function.
Use a selector to select your table and then call the following (You can optionally specify a set of properties (described below).
<pre class="prettyprint">tableDnD()</pre>
</li>
</ol>
<h2>A basic table</h2>
<div class="tableDemo">
<div id="debug" style="float:right;"></div>
<table id="table-1" cellspacing="0" cellpadding="2">
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</div>
<p>The HTML for the table is very straight forward (no Javascript, pure HTML):</p>
<pre class="prettyprint">
<table id="table-1" cellspacing="0" cellpadding="2">
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</pre>
<p>To add in the "draggability" all we need to do is add a line to the <code class="prettyprint">$(document).ready(...)</code> function
as follows:</p>
<pre class="prettyprint">
<span class="comment"><script type="text/javascript"></span>
$(document).ready(function() {
<span class="comment">// Initialise the table</span>
$("#table-1").tableDnD();
});
<span class="comment"></script></span>
</pre>
<p>In the example above we're not setting any parameters at all so we get the default settings. There are a number
of parameters you can set in order to control the look and feel of the table and also to add custom behaviour
on drag or on drop. The parameters are specified as a map in the usual way and are described below:</p>
<h2>Settings</h2>
<dl>
<dt>onDragStyle</dt>
<dd>This is the style that is assigned to the row during drag. There are limitations to the styles that can be
associated with a row (such as you can't assign a border—well you can, but it won't be
displayed). (So instead consider using <code class="prettyprint">onDragClass</code>.) The CSS style to apply is specified as
a map (as used in the jQuery <code class="prettyprint">css(...)</code> function).</dd>
<dt>onDropStyle</dt>
<dd>This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
to what you can do. Also this replaces the original style, so again consider using onDragClass which
is simply added and then removed on drop.</dd>
<dt>onDragClass</dt>
<dd>This class is added for the duration of the drag and then removed when the row is dropped. It is more
flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
is class is <code class="prettyprint">tDnD_whileDrag</code>. So to use the default, simply customise this CSS class in your
stylesheet.</dd>
<dt>onDrop</dt>
<dd>Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
and the row that was dropped. You can work out the new order of the rows by using
<code class="prettyprint">table.tBodies[0].rows</code>.</dd>
<dt>onDragStart</dt>
<dd>Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
table and the row which the user has started to drag.</dd>
<dt>scrollAmount</dt>
<dd>This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
FF3 beta)</dd>
</dl>
<h2>OnDrag custom table</h2>
<p>This second table has has an onDrop function applied as well as an onDragClass. The javascript to set this up is
as follows:</p>
<pre class="prettyprint">
$(document).ready(function() {
// Initialise the first table (as before)
$("#table-1").tableDnD();
// Make a nice striped effect on the table
$("#table-2 tr:even').addClass('alt')");
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
$("#table-2").tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Row dropped was "+row.id+". New order: ";
for (var i=0; i<rows.length; i++) {
debugStr += rows[i].id+" ";
}
$(table).parent().find('.result').text(debugStr);
},
onDragStart: function(table, row) {
$(table).parent().find('.result').text("Started dragging row "+row.id);
}
});
});
</pre>
<div class="tableDemo">
<table id="table-2" cellspacing="0" cellpadding="0">
<tr id="2.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td><td><input type="radio" name="rone" value="V" />V</td><td><input type="radio" name="rone" value="C" checked="checked" />C</td><td><input type="radio" name="rone" value="N" />N</td></tr>
<tr id="2.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td><td><input type="radio" name="rtwo" value="V" />V</td><td><input type="radio" name="rtwo" value="C" checked="checked" />C</td><td><input type="radio" name="rtwo" value="N" />N</td></tr>
<tr id="2.3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td><td><input type="radio" name="rthree" value="V" />V</td><td><input type="radio" name="rthree" value="C" checked="checked" />C</td><td><input type="radio" name="rthree" value="N" />N</td></tr>
<tr id="2.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td><td><input type="radio" name="rfour" value="V" />V</td><td><input type="radio" name="rfour" value="C" checked="checked" />C</td><td><input type="radio" name="rfour" value="N" />N</td></tr>
<tr id="2.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td><td><input type="radio" name="rfive" value="V" />V</td><td><input type="radio" name="rfive" value="C" checked="checked" />C</td><td><input type="radio" name="rfive" value="N" />N</td></tr>
<tr id="2.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td><td><input type="radio" name="rsix" value="V" />V</td><td><input type="radio" name="rsix" value="C" checked="checked" />C</td><td><input type="radio" name="rsix" value="N" />N</td></tr>
<tr id="2.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="7"/></td><td><input type="radio" name="rseven" value="V" />V</td><td><input type="radio" name="rseven" value="C" checked="checked" />C</td><td><input type="radio" name="rseven" value="N" />N</td></tr>
<tr id="2.8"><td>8</td><td>Eight</td><td><input type="text" name="eight" value="8"/></td><td><input type="radio" name="reight" value="V" />V</td><td><input type="radio" name="reight" value="C" checked="checked" />C</td><td><input type="radio" name="reight" value="N" />N</td></tr>
<tr id="2.9"><td>9</td><td>Nine</td><td><input type="text" name="nine" value="9"/></td><td><input type="radio" name="rnine" value="V" />V</td><td><input type="radio" name="rnine" value="C" checked="checked" />C</td><td><input type="radio" name="rnine" value="N" />N</td></tr>
<tr id="2.10"><td>10</td><td>Ten</td><td><input type="text" name="ten" value="10"/></td><td><input type="radio" name="rten" value="V" />V</td><td><input type="radio" name="rten" value="C" checked="checked" />C</td><td><input type="radio" name="rten" value="N" />N</td></tr>
<tr id="2.11"><td>11</td><td>Eleven</td><td><input type="text" name="eleven" value="11"/></td><td><input type="radio" name="releven" value="V" />V</td><td><input type="radio" name="releven" value="C" checked="checked" />C</td><td><input type="radio" name="releven" value="N" />N</td></tr>
<tr id="2.12"><td>12</td><td>Twelve</td><td><input type="text" name="twelve" value="12"/></td><td><input type="radio" name="rtwelve" value="V" />V</td><td><input type="radio" name="rtwelve" value="C" checked="checked" />C</td><td><input type="radio" name="rtwelve" value="N" />N</td></tr>
<tr id="2.13"><td>13</td><td>Thirteen</td><td><input type="text" name="thirteen" value="13"/></td><td><input type="radio" name="rthirteen" value="V" />V</td><td><input type="radio" name="rthirteen" value="C" checked="checked" />C</td><td><input type="radio" name="rthirteen" value="N" />N</td></tr>
<tr id="2.14"><td>14</td><td>Fourteen</td><td><input type="text" name="fourteen" value="14"/></td><td><input type="radio" name="rfourteen" value="V" />V</td><td><input type="radio" name="cfourteen" value="C" checked="checked" />C</td><td><input type="radio" name="rfourteen" value="N" />N</td></tr>
</table>
<div class="result"> </div>
</div>
<h2>Communicating with the back-end</h2>
<p>Generally once the user has dropped a row, you need to inform the server of the new order. To do this, we've
added a method called <code class="prettyprint">serialize()</code>. It takes no parameters but knows the current table from the
context. The method returns a string of the form <code class="prettyprint"><i>tableId</i>[]=<i>rowId1</i>&<i>tableId</i>[]=<i>rowId2</i>&<i>tableId</i>[]=<i>rowId3</i>...</code>
You can then use this as part of an Ajax load.
</p>
<p>
Since version 0.9, instead of manually creating the serialized data string we instead use <a href="http://api.jquery.com/jQuery.param/">jQuery's param method</a> which has the added benefit of url encoding the data string as well.
</p>
<p>This third table demonstrates calling the serialize function inside onDrop (as shown below). It also
demonstrates the "nodrop" class on row 3 and "nodrag" class on row 5, so you can't pick up row 5 and
you can't drop any row on row 3 (but you can drag it).</p>
<pre class="prettyprint">
$('#table-3').tableDnD({
onDrop: function(table, row) {
alert($.tableDnD.serialize());
}
});
</pre>
<div class="tableDemo">
<div id="AjaxResult" style="float: right; width: 250px; border: 1px solid silver; padding: 4px; font-size: 90%">
<h3>Ajax result</h3>
<p>Drag and drop in this table to test out serialise and using JQuery.load()</p>
</div>
<table id="table-3" cellspacing="0" cellpadding="2">
<tr id="3.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="3.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="3.3" class="nodrop"><td>3</td><td>Three (Can't drop on this row)</td><td><input type="text" name="three" value="three"/></td></tr>
<tr id="3.4" class="nodrop"><td>4</td><td>Four (Can't drop on this row)</td><td><input type="text" name="four" value="four"/></td></tr>
<tr id="3.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
<tr id="3.6" class="nodrag"><td>6</td><td>Six (Can't drag this row)</td><td><input type="text" name="six" value="six"/></td></tr>
<tr id="3.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
</table>
<div class="result"></div>
</div>
<h2>Multiple tbody table</h2>
<p>This table has multiple TBODYs. The functionality isn't quite working properly. You can only drag the rows inside their
own TBODY, you can't drag them outside it. Now this might or might not be what you want, but unfortunately if you then drop a row outside its TBODY you get a Javascript error because inserting after a sibling doesn't work. This will be fixed in the next version. The header rows all have the classes "nodrop" and "nodrag" so that they can't be dragged or dropped on.</p>
<div class="tableDemo">
<table id="table-4" cellspacing="0" cellpadding="2">
<thead>
<tr id="4.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
</thead>
<tbody>
<tr id="4.1"><td>4.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="4.2"><td>4.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="4.3"><td>4.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
<tr id="4.4"><td>4.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
<tr id="4.5"><td>4.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
<tr id="4.6"><td>4.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
</tbody>
<tbody>
<tr id="5.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
<tr id="5.1"><td>5.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="5.2"><td>5.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="5.3"><td>5.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
<tr id="5.4"><td>5.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
<tr id="5.5"><td>5.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
<tr id="5.6"><td>5.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
</tbody>
<tbody>
<tr id="6.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
<tr id="6.1"><td>6.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="6.2"><td>6.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="6.3"><td>6.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
<tr id="6.4"><td>6.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
<tr id="6.5"><td>6.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
<tr id="6.6"><td>6.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
</tbody>
</table>
</div>
<h2>Identify rows</h2>
<p>
The following table demonstrates the use of the default regular expression. The rows have IDs of the
form table5-row-1, table5-row-2, etc., but the regular expression is <code class="prettyprint">/[^\-]*$/</code> (this is the same
as used in the <a href="http://plugins.jquery.com/project/NestedSortable">NestedSortable</a> plugin for consistency).
This removes everything before and including the last hyphen, so the serialised string just has 1, 2, 3 etc.
You can replace the regular expression by setting the <code class="prettyprint">serializeRegexp</code> option, you can also just set it
to null to stop this behaviour.
</p>
<pre class="prettyprint">
$('#table-5').tableDnD({
onDrop: function(table, row) {
alert($.tableDnD.serialize());
},
dragHandle: ".dragHandle"
});
</pre>
<div class="tableDemo">
<table id="table-5" cellspacing="0" cellpadding="2">
<tr id="table5-row-1"><td class="dragHandle"> </td><td>1</td><td>One</td><td>some text</td></tr>
<tr id="table5-row-2"><td class="dragHandle"> </td><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="table5-row-3"><td class="dragHandle"> </td><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="table5-row-4"><td class="dragHandle"> </td><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="table5-row-5"><td class="dragHandle"> </td><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="table5-row-6"><td class="dragHandle"> </td><td>6</td><td>Six</td><td>some text</td></tr>
</table>
<div class="result"></div>
</div>
<p>In fact you will notice that I have also set the dragHandle on this table. This has two effects: firstly only
the cell with the drag handle class is draggable and secondly it doesn't automatically add the <code class="prettyprint">cursor: move</code>
style to the row (or the drag handle cell), so you are responsible for setting up the style as you see fit.</p>
<p>Here I've actually added an extra effect which adds a background image to the first cell in the row whenever
you enter it using the jQuery <code class="prettyprint">hover</code> function as follows:</p>
<pre class="prettyprint">
$("#table-5 tr").hover(function() {
$(this.cells[0]).addClass('showDragHandle');
}, function() {
$(this.cells[0]).removeClass('showDragHandle');
});
</pre>
<p>This provides a better visualisation of what you can do to the row and where you need to go to drag it (I hope).</p>
<h2>Meta table (auto configure)</h2>
<script type="text/javascript">
function inline_sprintlist_ondrop(table, row) {
var result = $(table).parent().find('.result'),
pre = $('<pre class="prettyprint">');
result.html(pre.text($.tableDnD.jsonize(true)));
prettyPrint();
// pre.text($(table).tableDnD.jsonize())
// return true;
//// '<div class="indent"> </div>',
}
</script>
<div class="tableDemo">
<table id="table-6"
data-table="dnd"
cellspacing="0"
cellpadding="2"
style=""
data-ondragstyle="display: block; z-index: 5; background-color: #7777cc;"
data-ondragclass=""
>
<tr id="6-1"><td>Basic example with extra fancy</td></tr>
<tr id="6-2"><td>row styles bot this trick really</td></tr>
<tr id="6-3"><td>only works with single column</td></tr>
<tr id="6-4"><td>because it looses the corumn</td></tr>
<tr id="6-5"><td>width when displaying a table</td></tr>
<tr id="6-6"><td>in block style unfortunately</td></tr>
</table>
<table
id="sprintlist_table"
cellspacing="0" cellpadding="10"
data-table="dnd"
data-ondragstart="$(table).parent().find('.result').text('data-ondragstart');"
data-ondrop="inline_sprintlist_ondrop(table, row);"
data-serializeregexp="^.*sprints$|[^\_]*$"
data-ondragclass="sprintlist-drag"
data-ondragstyle=""
data-ondropstyle=""
data-scrollamount="100"
data-sensitivity="1"
data-hierarchylevel="2"
data-indentartifact=" "
data-autowidthadjust="1"
data-autocleanrelations="1"
data-jsonpretifyseparator=" "
data-serializeparamname="sprintlist"
data-draghandle=""
>
<thead id="sprintlist_header">
<tr><th class="name">Name</th><th class="start_date">Start Date</th><th class="end_date">End Date</th><th class="actions">Actions</th></tr>
</thead>
<tbody>
<tr id="present_sprints" class="group_heading nodrag"><td colspan="4">Present Sprints</td></tr>
<tr id="sprint_145664"><td>First round - in sprint</td><td>2012-09-19</td><td>2012-09-27</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="future_sprints" class="group_heading nodrag"><td colspan="4">Future Sprints</td></tr>
<tr id="sprint_145665" class="toggler_row"><td>Second round</td><td>2012-09-28</td><td>2012-10-04</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145975" class="toggler_row"><td>Third round</td><td>2012-10-04</td><td>2012-10-11</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145965" class="toggler_row"><td>Fourth round</td><td>2012-10-13</td><td>2012-10-20</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145966" class="toggler_row"><td>Release prep</td><td>2012-10-20</td><td>2012-10-27</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145964" class="toggler_row"><td>Fifth run</td><td>2012-10-27</td><td>2012-11-03</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145974" class="toggler_row"><td>Sixth run</td><td>2012-11-03</td><td>2012-11-10</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145985" class="toggler_row"><td>Seventh run</td><td>2012-11-10</td><td>2012-11-17</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="sprint_145976" class="toggler_row"><td>Release 2 prep</td><td>2012-11-17</td><td>2012-11-24</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="past_sprints" class="group_heading nodrag"><td colspan="4">Past Sprints</td></tr>
<tr id="sprint_145996" class="toggler_row"><td>Backlog creation - complete</td><td>2012-09-01</td><td>2012-09-08</td>
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
<tr id="no_sprints" class="group_heading nodrag"><td colspan="4">No Sprints</td></tr>
</tbody>
</table>
<a class="toggle-json6" href="#">Hide JSON</a><div id="json6" class="result"></div>
</div>
<h2>Hierarchy table</h2>
<p>This table allows row order to be dragged horizontally and placed in a hierarchy under a parent row (since version 0.9). We also get a chance to look at the new jsonize method for JSON serialized form of the data. </p>
<p>In the onDrop event handler we pass the JSON as data to jquery through a HTTP POST ajax call to the server:</p>
<pre class="prettyprint">
$.post("server/ajaxJSONTest.php", $.tableDnD.jsonize(), function (data) {
$('#table-7-response').html('<br>'+ data);
});
</pre>
<p>On the back-end we have a PHP example that simply retrieves the JSON POST data from the built in stream php://input, decodes the payload and proceeds to build the hierarchy through recursion.</p>
<p>To keep the data simple and also stay compatible with the http variable methods as mentioned previously the data structure is formed with separate collections. If a parent has children the children first level are listed and if any of the children have subsequent children an additional collection is created for the first level of these.</p>
<p>The following hierarchy for example would generate 3 collections:</p>
<ul>
<li>7.00 <ul>
<li>7.01</li>
<li>7.02<ul><li>7.03</li></ul></li>
</ul></li>
<li>7.04</li>
</ul>
<p>In JSON the dataset looks like this:</p>
<a class="toggle-json7" href="#">Hide JSON</a><pre id="json7" class="prettyprint">
{
"table-7": [
"7.00",
"7.04"
],
"7.00": [
"7.01",
"7.02"
],
"7.02": [
"7.03"
]
}
</pre>
<p>We use the setting hierarchyLevel to indicate how many levels are supported, the example uses 4 levels deep. When populating the table you can use the the data-leve tag to indicate at which level the current row is represented at.</p>
<div class="hierarchyDemo">
<div style="float: right; width: 450px; border: 1px solid silver; padding: 4px; font-size: 90%">
<div id="table-7-response" style="float: right; margin-left: 20px">
<h3>Ajax result</h3>
<p>Drag and drop in this table to test out hierarcies and using JSON payload.</p>
</div>
</div>
<table id="table-7" cellspacing="0" cellpadding="2">
<tr id="7.00"> <td>7.0 One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="7.01" data-level="1"><td>7.1 Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="7.02" data-level="1"><td>7.2 Three</td><td><input type="text" name="three" value="three"/></td></tr>
<tr id="7.03" data-level="2"><td>7.3 Four</td><td><input type="text" name="four" value="four"/></td></tr>
<tr id="7.04"> <td>7.4 Five</td><td><input type="text" name="five" value="five"/></td></tr>
<tr id="7.05" data-level="1"><td>7.5 Six</td><td><input type="text" name="six" value="six"/></td></tr>
<tr id="7.06" data-level="2"><td>7.6 Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
<tr id="7.07" data-level="3"><td>7.7 Eight</td><td><input type="text" name="eight" value="eight"/></td></tr>
<tr id="7.08" data-level="4"><td>7.8 Nine</td><td><input type="text" name="nine" value="nine"/></td></tr>
<tr id="7.09" data-level="2"><td>7.9 Ten</td><td><input type="text" name="ten" value="ten"/></td></tr>
<tr id="7.10" data-level="2"><td>7.0 One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="7.11"> <td>7.1 Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="7.12"> <td>7.2 Three</td><td><input type="text" name="three" value="three"/></td></tr>
<tr id="7.13"> <td>7.3 Four</td><td><input type="text" name="four" value="four"/></td></tr>
<tr id="7.14"> <td>7.4 Five</td><td><input type="text" name="five" value="five"/></td></tr>
<tr id="7.15" data-level="1"><td>7.5 Six</td><td><input type="text" name="six" value="six"/></td></tr>
<tr id="7.16" data-level="2"><td>7.6 Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
<tr id="7.17" data-level="1"><td>7.7 Eight</td><td><input type="text" name="eight" value="eight"/></td></tr>
<tr id="7.18" data-level="2"><td>7.8 Nine</td><td><input type="text" name="nine" value="nine"/></td></tr>
<tr id="7.19"> <td>7.9 Ten</td><td><input type="text" name="ten" value="ten"/></td></tr>
</table>
<a class="toggle-json77" href="#">Hide JSON</a><div id="json77" class="result"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Initialise the first table (as before)
$("#table-1").tableDnD();
// Make a nice striped effect on the table
table_2 = $("#table-2");
table_2.find("tr:even").addClass("alt");
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
table_2.tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Row dropped was "+row.id+". New order: ";
for (var i=0; i<rows.length; i++) {
debugStr += rows[i].id+" ";
}
$(table).parent().find('.result').text(debugStr);
},
onDragStart: function(table, row) {
$(table).parent().find('.result').text("Started dragging row "+row.id);
}
});
$('#table-3').tableDnD({
onDragStart: function(table, row) {
$(table).parent().find('.result').text('');
},
onDrop: function(table, row) {
$('#AjaxResult').load("server/ajaxTest.php?"+$.tableDnD.serialize())
.parent().find('.result').html($('<p>').append('Result of $.tableDnD.serialize() is url encoded: ')
.append($('<pre class="prettyprint">').text($.tableDnD.serialize()))
.append(' Which looks like this when decoded (decodeURI): ')
.append($('<pre class="prettyprint">').text(decodeURI($.tableDnD.serialize()))));
prettyPrint();
}
});
$('#table-4').tableDnD(); // no options currently
$('#table-5').tableDnD({
onDragStart: function(table, row) {
$(table).parent().find('.result').text('');
},
onDrop: function(table, row) {
var data = $(table).tableDnDSerialize();
$(table).parent().find('.result').append(
$('<strong>').text('The urlencoded serialized string:'))
.append($('<pre class="prettyprint">').text(data))
.append($('<strong>').text('Which looks like this through decodeURIComponent:'))
.append($('<pre class="prettyprint">').text(decodeURIComponent(data)));
prettyPrint();
},
dragHandle: ".dragHandle"
});
$("#table-5 ").find("tr").hover(function() {
$(this.cells[0]).addClass('showDragHandle');
}, function() {
$(this.cells[0]).removeClass('showDragHandle');
});
$('#table-7').tableDnD({
hierarchyLevel: 4,
onDragStart: function(table, row) {
$(table).parent().find('.result').text('');
},
onDrop: function(table, row) {
$(table).parent().find('.result').append(
$('<strong>').text('JSON.stringify result of $.tableDnD.tableData()'))
.append($('<pre class="prettyprint">').text($.tableDnD.jsonize(true)));
prettyPrint();
$.post("server/ajaxJSONTest.php", $.tableDnD.jsonize(), function (data) {
$('#table-7-response').html('<br>'+ data);
});
}
});
$('.toggle-json6').toggle(function() {
$(this).text('Show JSON');
$('json6').hide();
return false;
},
function() {
$(this).text('Hide JSON');
$('json6').show();
return false;
});
$('.toggle-json7').toggle(function() {
$(this).text('Show JSON');
$('json7').hide();
return false;
},
function() {
$(this).text('Hide JSON');
$('json7').show();
return false;
});
$('#radio-button-test').tableDnD();
});
</script>
</body>
</html>