可排序:禁用可排序行中的列

时间:2013-05-07 13:46:55

标签: jquery jquery-ui jquery-ui-sortable

我有一个包含4列和几行的html表。行需要是可排序的(我使用jquery ui可排序),但是在左外侧 td永远不应该移动。所以基本上我希望能够移动行而不移动该行中的左外侧td。 我试图搞乱项目选项和取消方法没有成功。 我查找了类似的线程,但我的目标不是让每个td都可以排序:

jquery sortable with multiple tbody

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

这可以使用sortable吗? 如果有人能指出我正确的方向,我会非常感激。

我的标记:

<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;
    };

这是我到目前为止的链接:

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

在这种情况下,“计数器”列不应移动。

谢谢你, 莫妮卡

1 个答案:

答案 0 :(得分:3)

一种方法 - 真的不是最聪明的 - 可能是将Counter部分分成另一个表。 它看起来一样,就像你希望它一样工作,但正如我所说,我认为这不是解决问题的最明智的方法。

无论如何看看我做了什么: 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;
}

顺便说一下,您通常应将表格标题包裹在<th>标签中,这样您的标题(如计数器,位置,注释......)就可以识别为标题。

编辑(解决方案)

updated fiddle

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