我的应用程序中发生了一个奇怪的错误,希望有人知道解决方案。
我的问题:我有一个包含不同行的电影表,我使用Mottie的jquery tablesorter插件对我的项目进行排序并过滤它们。每行还有自己的编辑按钮,当你点击它时,td的可编辑,现在的问题是,当我编辑让我们说电影片名,然后点击电影导演更改他的名字,整行跳跃它会一直这样做,直到该行位于底部。当我删除tablesorter函数时,一切正常,但是当它处于活动状态时,就会发生这种奇怪的错误。现在我尝试在点击时禁用tableorter(遵循此solution),但这对我没有帮助。排序和过滤器被禁用,但它仍然推动我的整行。这是一个可视化问题的GIF:
注意:电影标题,日期,导演和运行时都是< p>和<输入>标签,点击编辑按钮< p>标签隐藏和<输入>是可见的。我使用这种方法是因为我需要以某种方式将我的新数据提供给我的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插件,禁用它没有帮助。
感谢所有正在努力的人!
答案 0 :(得分:1)
这不是一个错误,它是一个功能! :d
在内部,插件设置为在触发更新时自动求助;虽然,我没有看到它被共享的代码中使用。要解决此“功能”问题,请将resort
option设置为false
。