tablednd

<!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 pligin 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>