CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
monika
monika

Reputation: 499

Sortable: disable a column in a sortable row

I've a html table with 4 columns and few rows. The rows need to be sortable (I am using jquery ui sortable), however the outer left td should never move. So basically I'd like to be able to move the row without moving the outer left td in that row. I've tried to mess around with items option and cancel method with no success. I looked up similar threads but my aim is not to make every td sortable:

jquery sortable with multiple tbody

How to make a single <td> element in a <tr> not sortable (jquery ui)

Is this doable using sortable? If someone could point me in the right direction I would appreciate it a lot.

My mark up:

<table>
    <tr class="head_row">
    <td>Counter</td>
        <td>Position</td>
        <td>Note</td>
        <td>Visible</td>
    </tr>
    <tbody class="sort">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>TEST1</td>
            <td>Y</td>
     </tr>
     <tr>
            <td>2</td>
            <td>1</td>
            <td>TEST2</td>
            <td>Y</td>
    </tr>
    <tr>
            <td>3</td>
            <td>1</td>
            <td>TEST3</td>
            <td>Y</td>
   </tr>

   </tbody>

jquery:

$(function(){
    $(".sort").sortable({
        helper: fixWidth,
        revert : true,
        cursor: "move",
        opacity: 0.5
    });
});


// fixes the width of the table rows while sorting
    var fixWidth = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
          $(this).width($originals.eq(index).width())
        });
        return $helper;
    };

Here's a link to what I have so far:

http://jsfiddle.net/zSzks/2/

The "counter" column shouldn't move in this case.

Thank you, Monika

Upvotes: 1

Views: 3014

Answers (1)

SirDerpington
SirDerpington

Reputation: 11460

One approach - really not the smartest - could be to seperate the Counter section into another table. It looks the same and works like you want it to work but as I said I think it's just not the smartest way to solve your issue.

Anyway see what I did: jsfiddle

HTML

<table id="counterTable">
    <thead>
        <tr class="head_row">
            <th>Counter</th>
        </tr>
    </thead>
    <tbody class="fake">
        <tr>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
    </tbody>
</table>

CSS

#counterTable {
    float: left;
    /* to hide the noticeable difference between the 2 tables */
    margin-right: -2px;
}
.sort td, .fake td {
    border: 1px solid;
    width: 100px;
}

By the way you should usually wrap your table headings in <th> tags so your titles (like Counter, Position, Note, ...) are recognizable as headings.

EDIT (SOLUTION)

updated fiddle

$(".sort").sortable({
    //other config
    update: function (event, ui) {
        $('.sort > tr .counter').each(function (index) {
            $(this).text(index + 1);
        });
    }
});

Upvotes: 3

Related Questions