Tablesorter 在编辑行项目时更改行位置，即使禁用

Question

我的应用程序中出现了一个奇怪的错误，希望有人知道解决方案。

我的问题： 我有一部电影 table 有不同的行，我使用 Mottie 的 jquery tablesorter 插件来对我的项目进行排序并过滤它们。每行也有它自己的编辑按钮，当你点击它时 td's get editable，现在的问题是当我编辑时让我们说出电影标题，然后点击电影导演来改变他的名字，整行向下跳，并且一直这样做，直到该行位于底部。当我删除 tablesorter 功能时，一切正常，但当它处于活动状态时，它会出现这个奇怪的错误。现在，我尝试在单击时禁用 table 分拣机（在 solution 之后），但这对我也没有帮助。排序和过滤器被禁用，但它仍然将我的整行推倒。这是一个可视化问题的 gif：

注意：片名、日期、导演、片时都是

和标签，点击编辑按钮

标签隐藏并且 < input > 变得可见。我使用这种方法是因为我需要以某种方式将我的新数据提供给我的 django 模型，也许这就是问题的一部分。

我还有一个隐藏行，当我点击描述时它会出现，不知道这是否也很重要。

我想提供一个 jsfiddle，但我没能在 jsfiddle 中重现这个错误，它只出现在我的应用程序中：/

这是应用程序的重要代码：

HTML

<table id="movieTable" class="table-hover tablesorter">
<thead class="table-head">
          <tr>
               <th data-sorter="false"></th>
               <th>TITLE</th>
               <th class="gen">GENRE</th>
               <th>RELEASE DATE</th>
               <th>DIRECTOR</th>
               <th>DESCRIPTION</th>
               <th>RUNTIME</th>
               <th>STATUS</th>
               <th>IMDB</th>
               <th data-sorter="false" id="buttons-head-bottom"></th>
          </tr>
</thead>
<tbody>
<td>
    <a href=“/myapp/evil-dead/">
        <input class="input-title hide" value="Evil Dead" form="movie1" name="title"/> <!— hidden on default —>
        <p class="movie-title">Evil Dead</p>
    </a>
</td>
<td>
    <select class="hide input-genre-select" form="movie1" name="genre"> <!— hidden on default —>
    <!— options code —>
    </select>
    <p class="movie-genre">Horror</p>
</td>
<td>
    <input class="hide input-release" value="25.04.2013" form="movie1" name="date" size="10"/> <!— hidden on default —>
    <p class="movie-release">25.04.2013</p>
</td>
<td>
    <input class="hide input-director" value="Fede Alvarez" form="movie1" name="director"/> <!— hidden on default —>
    <p class="movie-director">Fede Alvarez</p>
</td>
<td class="desc-pointer toggle" data-toggle="collapse" data-target=".description1"> <!— collapse and shows a hidden table row when clicked —>
    Description <i class="fa fa-caret-right"></i>
</td>
<td>
    <input class="hide input-runtime" value="91" form="movie1" name="runtime" maxlength="4" size="4"/> <!— hidden on default —>
    <p class="movie-runtime">91 min</p>
</td>
<td>
    <select class="hide input-status-select" form="movie1" name="status"> <!— hidden on default —>
    <!— options code —>
    </select>
    <p class="movie-status">Bought and watched</p>
</td>
<td>6,5</td>
<td>
    <!— edit button, is hidden when clicked on it —>
    <button type="button" class="edit-btn">
        <i class="fa fa-pencil-square"></i>
    </button>
    <!— hidden on default, shows up when clicked on edit-btn —>
    <button type="submit" form="movie1" class="save-btn">
        <i class="save-btn fa fa-save"></i>
    </button>
    <!-- delete button -->
    <button id="del-btn1" type="button" class="delete-btn btn btn-default" data-toggle="modal" data-target="#deleteModal1">
        <i class="fa fa-remove"></i>
    </button>
</td>
</tbody>
</table>

我在这里只提供了一个 table 行，但其他每一行都是相同的。

Javascript

// table sorter

$(function(){
    const $table = $("#movieTable").tablesorter({
        dateFormat: "ddmmyyyy",
        headers: {
            2: { sorter: "select" },
            3: { sorter: "shortDate" },
            7: { sorter: "select" },
        },
        widgets: ["filter"],
        widgetOptions : {
            filter_columnFilters: false,
        }
    });

    $.tablesorter.filter.bindSearch( $table, $('.search') );

});

 // edit button

$(".edit-btn").click(function() {

    $('table')
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell')
    .removeClass('tablesorter')
    .find('thead th')
    .unbind('click mousedown')
    .removeClass('header headerSortDown headerSortUp');

    const parent = $(this).parent().parent()
    parent.find(".input-director, .input-runtime, .input-release, .input-title").addClass("highlight");
    parent.find(".movie-title, .movie-genre, .movie-release, .movie-director, .movie-runtime, .movie-status").addClass("hide");
    parent.find(".input-title, .input-genre-select, .input-release, .input-director, .input-runtime, .input-status-select").removeClass("hide");
    parent.find(".edit-btn").hide();
    parent.find(".save-btn").show();

    $(".gen").addClass("genre-padding");
    $(".title-link").bind("click", function(e) {
        e.preventDefault();
    })
})

如果需要，我可以提供更多代码，但我希望这足以让有人找到解决此错误的方法。正如我之前所说，我找到的唯一解决方案是删除 tablesorter 插件，禁用它没有帮助。

感谢所有努力的人！

Answer 1

这不是错误，这是一个功能！ :D

插件在内部设置为在触发更新时自动恢复；虽然，我没有看到它在共享的代码中使用。要解决此 "feature"，请将 resort option 设置为 false。

Tablesorter 在编辑行项目时更改行位置，即使禁用

Tablesorter changes row position when editing row item, even if disabled

javascript

jquery

html

tablesorter