TableDnD
TableDnD copied to clipboard
isocra
Nested tables ?
Hello, is there a way to use this great plugin in nested tables ? e.g.: I have one big table that contains other tables in her own cells... Row of little tables in cell should be draggable, but also the rows of the big table should be draggable ... At the moment it doesn't works, throwing an exception like: NotFoundError: Node was not found
Thank you for any suggestion !!
@rasega Sounds like an awesome Idea, I think the mest way to approach this is to write the example, perhaps you can add an example table to the samples page and submit a pull request.
We then have something to work against and I am sure we can find a solution. I can't think of any technical reason why we shouldn't be able to do it. We just haven't tested that so lets do something about it. Since you've already tried it you are closer to making it happen than anyone else so please help us to help you, deal?
@rasega any luck providing us with an example? We can do cool things just as well as the next guy but we are more likely to do cool things someone actually wants. Do you still want nested tables?
Hi, I'm so sorry for my absence, not due to my want ;-) Then you already update the code with nested tables ? wow...it will be great, I'm gonna test it as soon as I can !
Is there also a way to move more rows at the same time ?
What kind of example do you need ?
Thank you for your help !
@rasega welcome back. Nothing has been updated we are still waiting on you to provide us with an example table layout to see if we can't make it work for you.
Issue reopened
Oh ok nickl, probably nested table idea is going to be replaced by a feature to moving more rows at one time, it would solve more problems on managing complex data tables. Suppose to have a table with many rows and some of these are next each other, I would like to move all these rows as they would be linked ...
What do you think about this ? Any of the examples you show here is good, just let select more than one row to be moved ...
Thank you for any suggestion !!
@rasega it would really help me a great deal if you could provide me with an example table outline (html).
Just something really basic will be fine, as long as it illustrates what you are trying to accomplish.
I am not understanding how rows can end up next to each other.
This is just an example of what I'm trying to accomplish. At this time your script allow to drag&drop just one row, but it would be useful to allow a structure to drag more rows, for example grouped by a class, like here:
<script>
function table_drag(idtable)
{
$('#'+idtable).tableDnD(); // no options currently
$("#"+idtable+" tr").hover(
function()
{
//alert('hover table row');
$(this.cells[0]).addClass('showDragHandle');
},
function()
{
$(this.cells[0]).removeClass('showDragHandle');
});
$('#'+idtable).tableDnD(
{
onDragClass: "drag_class",
onDragStart:
function(table, row)
{
//alert(table.id+' '+row.id);
},
onDrop: function(table, row)
{
//alert('dropped');
//alert($('#'+idtable).tableDnDSerialize());
},
onDropClass: ""
//dragHandle: ".dragHandle"
});
//alert('drag rows');
}
$(document).ready(function(e) {
table_drag("mytable");
});
</script>
<table width="100%" border="1" id="mytable" >
<tr class="group1 header" >
<th scope="col">title1 header group1</th>
<th scope="col">text group1</th>
</tr>
<tr class="group1" >
<td>title row1 group1</td>
<td>value row1 group1</td>
</tr>
<tr class="simple_drag" id="row1" >
<td>title row1 simple</td>
<td>value row1 simple</td>
</tr>
<tr class="simple_drag" id="row2" >
<td>title row2 simple</td>
<td>value row2 simple</td>
</tr>
<tr class="simple_drag" id="row3" >
<td>title row3 simple</td>
<td>value row3 simple</td>
</tr>
<tr class="nodrag nodrop">
<td>title last row simple</td>
<td>value last row simple</td>
</tr>
</table>
What if I would like to drag the group1 rows between row2 and row3 The result should be something like this:
<table width="100%" border="1" id="mytable" >
<tr class="simple_drag" id="row1" >
<td>title row1 simple</td>
<td>value row1 simple</td>
</tr>
<tr class="simple_drag" id="row2" >
<td>title row2 simple</td>
<td>value row2 simple</td>
</tr>
<tr class="group1 header" >
<th scope="col">title1 header group1</th>
<th scope="col">text group1</th>
</tr>
<tr class="group1" >
<td>title row1 group1</td>
<td>value row1 group1</td>
</tr>
<tr class="simple_drag" id="row3" >
<td>title row3 simple</td>
<td>value row3 simple</td>
</tr>
<tr class="nodrag nodrop">
<td>title last row simple</td>
<td>value last row simple</td>
</tr>
</table>
Let me know if I can help you with others examples or testing.
Thank you!
@rasega I updated your past and added the markdown required for us to see the source. Thank you for the elaborate detail I will make some time to go through that and see what we can do about it.
@rasega Ok I am not following.
The only solution I think of would either be to wrap the rows in a common parent or to assign the same class to the grouped rows so we can say something like: drag all group1 together. but I don't see any of these options present in your example.
Which rows go together and how are we supposed to know that?
Please advise.
P.S> you enclose source in a block with 3 back ticks ` see GFM Syntax Highlight
In my example here I've created 2 row "grouped" by the class: "group1" My idea is to set also a class "header" to that first row of the block that will be draggable, then the "others" rows connected will be dragged following this one. I've managed to create something like this by this steps:
- onMousedown of the header-row hiding the simple-rows ,
- drag the header-row
- onDrop of the header-row make an "insertAfter" of all simple-rows of the block after the row-id returned by the tablednd It seems to works, but it is not really a dragging of multiple rows ... this is just a custom solution for my bad problem, I think that will be better to let the user select the rows and drag these together ...
OK now I am following so some rovs are not grouped while others are. Where is the id for the group 1 grouping as none of the rows have an id?
One way to solve this is to define a data tag lets call it data-multi, on the row you want to be draggable as a group which provides the class name of the group of rows. This will allow the other rows in the group to still move freely as they don't declare the multi attribute.
For added flexibility we can also make the data-multi assignable on a per cell basis to give you fine grained control ignoring multi-drag if not provided or defined as "none" for example.
The table will look something like:
<table id="example-table">
<tr id="row1">
<td>single drag no group</td>
<td>single drag no group</td>
</tr>
<tr id="row2">
<td>single drag no group</td>
<td>single drag no group</td>
</tr>
<tr class="group1" data-multi="group1" id="group1">
<th scope="col">header group1 group drag</th>
<th scope="col">header group1 group drag</th>
</tr>
<tr class="group1" id="row3">
<td>title row3 of group1 single drag</td>
<td>title row3 of group1 single drag</td>
</tr>
<tr class="group1" id="row4">
<td>title row4 of group1 single drag</td>
<td>title row4 of group1 single drag</td>
</tr>
<tr class="group2" id="row5">
<td data-multi="none">title row5 of group2 no header no group drag</td>
<td data-multi="group2">title row5 of group2 no header group drag</td>
</tr>
<tr class="group2" id="row6">
<td>title row6 of group2 no header no group drag</td>
<td>title row6 of group2 no header no group drag</td>
</tr>
<tr id="row7">
<td>single drag no group</td>
<td>single drag no group</td>
</tr>
<tr class="nodrag nodrop">
<td colspan="2">footer no drag</td>
</tr>
</table>
Does this look like something that can work? Spot any problems with this design?
I think a better way to manage this kind of grouped rows is to set a "group header" (i.e.: the first row of the group) that will be the "anchor" to drag the group and let the others group rows to be draggable inside of the group. This seems to be the same as the second example of "What to do afterwards?" you posted here: http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ with blocks of rows with headers...but that time the header are not draggables
@rasega When you reference "What to do afterwards?" are you referring to the serialise? I am not following...
The nodrag nodrop is not a header for a group it's simply a fixed row. The event starts at onDrag and it starts with the element the event occurred from ie. the header. We need something to identify this as a group draggable element hence the data-multi. Why would you prefer to use a row classed as header instead? What if you don't want a header row but a superimposed first column header instead? These are the things we should be considering.
The header drag-able is the common use case I agree but I am trying to find a solution that will satisfy more than just the one if you don't mind helping us look at the bigger picture.
If you declare the children as a table inside a row which groups them (I have a feeling this may already work) it already confines children to the group (table) as you require. You can style the cells to fixed width to have the columns all the same and will be able to produce something indistinguishable to multiple headers andi grouped rows as per your example. - This was my initial suggestion.
@nickl- The proposed solution sounds fine for my use case; any ideas on how long before something like this would be released?
I had a nested table DnD using a much older version of this plugin with a Jquery version older than 1.7. It worked great. I've upgraded and now it doesn't work.
My structure is like so.
| Section | |||
| sort1 | |||
sort2
|
and so on... With the latest version.. It almost works.. with exception of firing off the OnDrop function..
OK now I am following so some rovs are not grouped while others are. Where is the id for the group 1 grouping as none of the rows have an id?
One way to solve this is to define a data tag lets call it
data-multi, on the row you want to be draggable as a group which provides the class name of the group of rows. This will allow the other rows in the group to still move freely as they don't declare the multi attribute.For added flexibility we can also make the
data-multiassignable on a per cell basis to give you fine grained control ignoring multi-drag if not provided or defined as "none" for example.The table will look something like:
<table id="example-table"> <tr id="row1"> <td>single drag no group</td> <td>single drag no group</td> </tr> <tr id="row2"> <td>single drag no group</td> <td>single drag no group</td> </tr> <tr class="group1" data-multi="group1" id="group1"> <th scope="col">header group1 group drag</th> <th scope="col">header group1 group drag</th> </tr> <tr class="group1" id="row3"> <td>title row3 of group1 single drag</td> <td>title row3 of group1 single drag</td> </tr> <tr class="group1" id="row4"> <td>title row4 of group1 single drag</td> <td>title row4 of group1 single drag</td> </tr> <tr class="group2" id="row5"> <td data-multi="none">title row5 of group2 no header no group drag</td> <td data-multi="group2">title row5 of group2 no header group drag</td> </tr> <tr class="group2" id="row6"> <td>title row6 of group2 no header no group drag</td> <td>title row6 of group2 no header no group drag</td> </tr> <tr id="row7"> <td>single drag no group</td> <td>single drag no group</td> </tr> <tr class="nodrag nodrop"> <td colspan="2">footer no drag</td> </tr> </table>Does this look like something that can work? Spot any problems with this design?
Was this ever implemented ?
