带有可编辑和stickeyheaders小部件的tablesorter中的下一个单元格

Question

我正在尝试使动态加载的表使用 tablesorter 并同时启用 editable 和 stickyHeaders 小部件。

我已经很接近工作了。不过有一件很奇怪的事情。如果我点击一个可编辑的单元格然后按 Tab 键，下一个单元格会被激活，但只有一瞬间然后失去焦点。

在 Chrome 中，光标会消失。

在 Safari 中，在第二个单元格失去焦点后，您可以看到光标跳到表格标题行的最右侧，它所在的位置一直闪烁，直到您单击其他位置。 这是 Firefox 中显示光标的图片

以下是 editable 小部件的精简版演示，可按预期工作： Editable working version

这里是 editable 小部件的精简版演示，还添加了 stickyheaders，它可以将标签分到下一个单元格功能：

Editable + Stickyheaders not working

唯一的区别是添加了Stickyheaders

---

编辑：

好的，问题似乎是从jquery.tablesorter.widgets.js的第885行开始的这段代码

searching: function(table, filter, skipFirst) {
        var wo = table.config.widgetOptions;
        clearTimeout(wo.searchTimer);
        if (typeof filter === 'undefined' || filter === true) {
            // delay filtering
            wo.searchTimer = setTimeout(function() {
                ts.filter.checkFilters(table, filter, skipFirst );
            }, wo.filter_liveSearch ? wo.filter_searchDelay : 10);
        } else {
            // skip delay
            ts.filter.checkFilters(table, filter, skipFirst);
        }
    },

如果我将其注释如下，则恢复选项卡功能：

    searching: function(table, filter, skipFirst) {
        /*var wo = table.config.widgetOptions;
        clearTimeout(wo.searchTimer);
        if (typeof filter === 'undefined' || filter === true) {
            // delay filtering
            wo.searchTimer = setTimeout(function() {
                ts.filter.checkFilters(table, filter, skipFirst );
            }, wo.filter_liveSearch ? wo.filter_searchDelay : 10);
        } else {
            // skip delay
            ts.filter.checkFilters(table, filter, skipFirst);
        }*/
    },

---

当您使用表顶部的输入搜索值时，上述代码块似乎隐藏了所有不匹配的内容。注释掉它会修复标签功能，但会破坏过滤功能。

有什么想法可以修改这段代码以使正常选项卡到下一个单元格再次工作而不会破坏过滤器？

Answer 1

我不是 100% 确定这是问题所在，但正在加载原始 tablesorter 和最新版本的 tablesorter：

<script type="text/javascript" src="jquery2.0.3_Plus.js?v2.3.0"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js?v2.3.0"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js?v2.3.0"></script>
<script type="text/javascript" src="tableData.js?v2.3.0"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="loadTable.js"></script>
<script src="jquery.tablesorter.js"></script>
<script src="jquery.tablesorter.widgets.js"></script>
<script src="widget-editable.js"></script>

去掉原来的，把“loadTable.js”移到新版本下面：

<script type="text/javascript" src="jquery2.0.3_Plus.js?v2.3.0"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js?v2.3.0"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js?v2.3.0"></script>
<script type="text/javascript" src="tableData.js?v2.3.0"></script>

<script src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="loadTable.js"></script>
<script src="jquery.tablesorter.widgets.js"></script>
<script src="widget-editable.js"></script>

另外，我不确定为什么光标会这样，请将 editable_columns 选项设置为不包含不存在的列 - 我将在下一个版本中修复小部件以正确忽略非- 存在的列。

editable_columns : [0,1,2,3,4,5] // or use '0-5'

Answer 2

我明白了。

在jquery.tablesorter.widgets.js的第604行，我改了....

此检查：

if (event.type === 'filterReset') {
    c.$table.find('.' + ts.css.filter).add(wo.filter_$externalFilters).val('');
    ts.filter.searching(table, []);
}...

阅读：

if (event.which !== 9){
} 
else if (event.type === 'filterReset') {
    c.$table.find('.' + ts.css.filter).add(wo.filter_$externalFilters).val('');
    ts.filter.searching(table, []);
} .....

到目前为止，这似乎在不破坏任何排序功能的情况下修复了选项卡功能。

（公平地说，这可能会产生一些未知的副作用）

Here is a demo of the working version