Question

There is a jquery ui sortable widget extension which makes table columns sortable.
According to examples page it is possible to specify row as undruggable.

 $(function () {
    $('#ex7').sorttable({
        placeholder: 'placeholder',
        helperCells: ':not(.footerrow td)'
    }).disableSelection();
    });​

I want to set several colspanned rows such way.
But there are several issues occur when i set fixed rows in the middle of the table.
First – fixed rows is not showed as dragged during drag&drop, second – after several movements table becomes broken.

jsfiddle example

Is there any way to correct it?

UPDATE:

found workaround using absolute positioned div with width=table width, but actually i don’t like it

jsfiddle example

Answer 1

The problem you are having is that you set the first cell of your static row to a colspan of 4.

When you move that column to the second position the cell with the colspan is shifted into second position.

Now you end up with the second column sontaining the cell with the colspan of 4 which off-sets everything.
I would try and avoid colspans in cells if you wish to move around columns.

You can fix this by simply adding empty cells instead of using a colspan.

Replace this:

<tr class="footerrow"><td colspan="4">unsortable  colspan row</td></tr>

with this:

<tr class="footerrow"><td></td><td></td><td></td><td></td></tr>

DEMO – v1 – Using individual empty cells instead of colspan

In addition I would probably add some styles to hide the column borders for that row.

Edit

I played around a little longer with this and was able to come up with another alternative. Mind you it is not as smooth as yours and could be seen more hacky as well.

I looked at the start and stop callbacks of the sortable extension and wondered if one could add 4 cells at start and replace them again at stop.

When using start you will see 4 cells during sorting, which I didn’t like as much as I thought that you want to see the footers during the drag-drop action.

The I noticed that when stop executes it executes prior to the actual sorting being applied, making start for our purpose redundant.

This means at stop we can replace the single cell with 4, let it sort, add a small time-delay using window.setTimeout which then after a small delay replaces the 4 cells again with the 1 cell. That also means the footer stays intact during drag-drop.

DEMO – v2 – Using stop to re-draw footers before and after sorting

That seems to work but as I said it is not as smooth as yours as mine is redrawn and causes a little flicker. Also I’m not certain if 100 milliseconds will be enough on the setTimout call when you got a huge table.

Either way, I had fun working with this. I hope though this will give you at least some more ideas to play around with.

The code from the DEMO v2

HTML
note I added a attribute data-title to the tr storing the title text to be able to
dynamically add them. See the footer-row HTML below, all other HTML stay the same.

<tr class="footerrow" data-title="Additional Features"><td></td><td></td><td></td><td></td></tr>

Script
Added start callback. Let me know if you have any questions.

$(function() {
    $specialRows = $("#ex7 tr.footerrow");

    $('#ex7').sorttable({
        placeholder: 'placeholder',
        helperCells: ':not(.footerrow td)',
        stop: function(e, ui) {
            // This replaces the 1 cell with 4 and executes before the sorting actually occurs.
            buildFooterTemplates();

            // Adding a small timeout we rever to the single cell with colspan 4
            window.setTimeout(function() {
                buildFooterRows();
            }, 100);
        }
    }).disableSelection();

    var buildFooterTemplate = function(title) {
        return '<td></td><td></td><td></td><td></td>';
    };

    var buildFooterRow = function(title) {
        return '<td colspan="4" align=center>' + title + '</td>';
    };

    var buildFooterTemplates = function() {
        $specialRows.each(function() {
            var $row = $(this);
            var title = $row.attr("data-title");

            $row.empty().append(buildFooterTemplate());
        });
    };


    var buildFooterRows = function() {
        $specialRows.each(function() {
            var $row = $(this);
            var title = $row.attr("data-title");

            $row.empty().append(buildFooterRow(title));
        });
    };

    buildFooterRows();
});​