Question

如何在选择表格的特定列时对行进行排序？

[...]
<tbody id="table_body">
    <tr>
        <td>A</td>
        <td>10</td>
    </tr>
    <tr>
        <td>B</td>
        <td>8</td>
    </tr>
    <tr>
        <td>T</td>
        <td>12C</td>
    </tr>
</tbody>
[...]

剧本：

var fixHelper = function (e, ui) {
    ui.children().each(function () {
        $(this).width($(this).width());
    });

    return ui;
};

$(function () {
    $("#table_body").sortable({
        helper: fixHelper
    }).disableSelection();
});

所以，我希望只有在选择第一列时才对行进行排序。如果我选择第二列，则没有任何反应。有可能吗？

编辑：

我尝试Pow说的话：

$('#table_body td').mousedown(function (event) {
    if ($(this).attr("class") != "add_story") {
        event.stopImmediatePropagation();
    }
});

但是当我使用类“add_story”移动一行时，每一行都会被任何列移动。

Answer 1

您还可以使用句柄选项：http://api.jqueryui.com/sortable/#option-handle

为第一列提供类似“sortHandle”的类，然后在脚本中将handle选项设置为仅在单击该列时进行排序。

var fixHelper = function (e, ui) {
    ui.children().each(function () {
        $(this).width($(this).width());
    });

    return ui;
};

$(function () {
    $("#table_body").sortable({
        helper: fixHelper,
        handle: '.sortHandle',
    }).disableSelection();
});

HTML：

   <tbody id="table_body">
        <tr>
            <td class="sortHandle">A</td>
            <td>10</td>
        </tr>
        <tr>
            <td class="sortHandle">B</td>
            <td>8</td>
        </tr>
        <tr>
            <td class="sortHandle">T</td>
            <td>12C</td>
        </tr>
    </tbody>

以下是一个示例：http://jsfiddle.net/uWZ59/2/

Answer 2

我能够通过向单元格添加类来实现此目的。

然后在您不希望允许拖入的单元格中，覆盖mousedown事件

这样的标记：

<td class='grab'>A</td>
<td class='show'>10</td>

这样的剧本：

$(function () {
    $("tbody").sortable({
        helper: fixHelper,
        axis: "y"
    }).disableSelection();
    $('#Table_Body').not('.add_Story').mousedown(function(event){
        event.stopImmediatePropagation();
    });
});

example

轴y不是必需的，我只是认为它会很好。

仅在拖动特定列时可排序行

2 个答案: