Question

我尝试在editable和stickyHeaders窗口小部件都启用的情况下使用tablesorter创建动态加载的表格。

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

在Chrome 中，光标消失。

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

enter image description here

以下是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

使用可编辑和stickeyheaders小部件选项卡到tablesorter中的下一个单元格

2 个答案: