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

Jquery 可排序:禁用可排序行中的列,jquery,jquery-ui,jquery-ui-sortable,Jquery,Jquery Ui,Jquery Ui Sortable,我有一个html表格,有4列和几行。行需要是可排序的(我使用的是jQueryUISORTABLE),但是外部的行是左侧的 运输署绝对不应采取行动。所以基本上我希望能够移动这一行,而不移动那一行中的外部左td。 我尝试过乱用items选项和cancel方法,但没有成功。 我查找了类似的线程,但我的目标不是使每个td都可排序: 使用sortable是否可行? 如果有人能给我指出正确的方向,我将不胜感激 我的加价: <table> <tr class="head_row"

我有一个html表格,有4列和几行。行需要是可排序的(我使用的是jQueryUISORTABLE),但是外部的行是左侧的 运输署绝对不应采取行动。所以基本上我希望能够移动这一行,而不移动那一行中的外部左td。 我尝试过乱用items选项和cancel方法,但没有成功。 我查找了类似的线程,但我的目标不是使每个td都可排序:

使用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>
以下是到目前为止我所拥有的链接:

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

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

谢谢,,
Monika

一种方法——实际上不是最聪明的方法——可能是将计数器部分分离到另一个表中。 它看起来是一样的,工作起来就像你想让它工作一样,但正如我所说的,我认为这不是解决你问题的最聪明的方法

不管怎样,看看我做了什么:

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>
顺便说一句,您通常应该将表格标题包装在
标记中,以便您的标题(如计数器、位置、注释等)可以识别为标题

编辑(解决方案)


谢谢你的回复。表行是通过在foreach循环中迭代对象集合(我使用的是jspel和java)来填充的,计数器实际上类似于;在循环中增加1,我需要计数器和位置在同一行中。还有其他建议吗?抱歉,我只是想澄清一下:我正试图用counter的值覆盖position的值,只要我不必拆分表,我就知道如何做了。我想知道这在sortable中是否可行。我认为这是不可能的,那么我必须考虑另一种方法。如果移动了一行,可以更正计数器值。看我最新的小提琴。万分感谢,太棒了!酷…我不确定这是否对你有帮助,但似乎是这样。总是乐于助人!:)
<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>
#counterTable {
    float: left;
    /* to hide the noticeable difference between the 2 tables */
    margin-right: -2px;
}
.sort td, .fake td {
    border: 1px solid;
    width: 100px;
}
$(".sort").sortable({
    //other config
    update: function (event, ui) {
        $('.sort > tr .counter').each(function (index) {
            $(this).text(index + 1);
        });
    }
});