Question

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

我的问题：我有一个包含不同行的电影表，我使用Mottie的jquery tablesorter插件对我的项目进行排序并过滤它们。每行还有自己的编辑按钮，当你点击它时，td的可编辑，现在的问题是，当我编辑让我们说电影片名，然后点击电影导演更改他的名字，整行跳跃它会一直这样做，直到该行位于底部。当我删除tablesorter函数时，一切正常，但是当它处于活动状态时，就会发生这种奇怪的错误。现在我尝试在点击时禁用tableorter（遵循此solution），但这对我没有帮助。排序和过滤器被禁用，但它仍然推动我的整行。这是一个可视化问题的GIF：

注意：电影标题，日期，导演和运行时都是＆lt; p>和＆lt;输入＆gt;标签，点击编辑按钮＆lt; p>标签隐藏和＆lt;输入＆gt;是可见的。我使用这种方法是因为我需要以某种方式将我的新数据提供给我的django模型，这可能是问题的一部分。

此外，我有一个隐藏的行，当我点击描述时显示，不知道那些是否也很重要。

我想提供一个jsfiddle，但我没有设法在jsfiddle中重现这个bug，它只出现在我的应用程序中：/

以下是该应用的重要代码：

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>

我这里只提供了一个表格行，但每隔一行都是相同的。

的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();
    })
})

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

感谢所有正在努力的人！

Answer 1

这不是一个错误，它是一个功能！：d

在内部，插件设置为在触发更新时自动求助;虽然，我没有看到它被共享的代码中使用。要解决此“功能”问题，请将resort option设置为false。

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

1 个答案: