Question

我有一个tablesorter项目，几个月来一直在客户端分页方面做得很好。现在我必须把它转到服务器端分页，但我无法使用我在客户端版本中使用的所有功能。

就主题而言，我的问题是让这个特定的功能发挥作用。

我为实现这一目标所做的是编写一个自定义函数来绑定到tablesorterPager配置上的ajaxProcessing处理程序：

ajaxProcessing: function (data) {
                    if (data && data.hasOwnProperty('rows')) {
                        var str = "", d = data.rows,
                            // total number of rows (required)
                            total = data.total_rows,
                            // len should match pager set size (c.size)
                            len = d.length;

                        for (var i = 0; i < len; i++) {                          
                            str += '<tr>';
                            for (var column = 0; column < orderedFieldMapping.length; column++) {
                                if (orderedFieldMapping[column].toUpperCase() != 'ACTIVATIONDATE' || bReadOnly)
                                    str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div>' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : '') + '</div></td>';
                                else
                                    str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div ' + (eval('d[i].' + orderedFieldMapping[column]) != null ? '' : 'class="emptyPlaceholder"') + 'onmouseup="javascript:SelectActivationDateText(this);" onblur="javascript:RestoreCellStyle(this);">' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : emptyTextString) + '</div></td>';
                            }
                            str += '</tr>';
                        }

                        // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
                        return [total, $(str)];
                    }
                },

请注意，我在jQuery对象中返回一组表行，允许选项如文档示例注释中所述（在此代码示例中也可见）。我这样做的原因是我需要控制表标记来添加样式，处理程序和类。这就是我在内心循环中所做的事情，而且确切知道我在那里做什么并不是很重要。重要的是我得到了我的表的预期结果和标记，服务器端分页没有问题，但是可信的小部件无效。

我在js控制台上没有任何警告，所有工作正常，但我无法编辑标记为可编辑的列。我可以看到，同时查看标记因为根本不存在contenteditable属性。当然，窗口小部件是初始化和配置的（与以前版本相同，具有客户端分页）。

指向某些小部件故障的另一个暗示（可能）：我设法手动添加（在我上面发布的相同功能内）标记上的contenteditable属性，只是为了看看它是否会给我一些信息。在这种情况下，我可以按预期编辑内容，但我没有得到editComplete事件的处理程序，并且数据接受设置不适用。我仍然可以手动添加处理程序和自定义代码以使其按预期工作，但它会很糟糕，我不想使用hack来使已经实现的功能起作用。

感谢所有愿意回答的人，我们将不胜感激。

Answer 1

我想我看到了这个问题。当内容更新时（通过寻呼机或其他内容），contenteditable小部件不会在表格单元格中的元素上重新应用contenteditable属性。

所以这绝对是一个错误，我刚开了一张票：https://github.com/Mottie/tablesorter/issues/732

同时，您可以将标识属性添加到标记中的div：

str += '<td><div contenteditable>...</div></td>';

无法在服务器端分页tablesorter上使用contenteditable小部件

1 个答案: