无法在服务器端分页表格排序器上使用 contenteditable 小部件答案

【问题标题】：Cannot use contenteditable widget on server side paged tablesorter无法在服务器端分页表格排序器上使用 contenteditable 小部件
【发布时间】：2014-09-23 16:07:19
【问题描述】：

我有一个 tablesorter 项目，几个月以来一直在客户端分页上运行良好。现在我必须将它转换为服务器端分页，但我无法让它与我在客户端版本中使用的所有功能一起使用。

关于主题，我的问题是让 contenteditable 功能发挥作用。

我所做的就是编写一个自定义函数来绑定到 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 对象中返回一组表格行，允许选项如文档示例注释中所述（在此代码示例中也可见）。我这样做的原因是我需要控制表标记来添加样式、处理程序和类。这就是我在内部循环中所做的，确切地知道我在那里做什么并不是很重要。重要的是我得到了我的表的预期结果和标记，服务器端分页没有问题，但是 contenteditable 小部件不起作用。

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

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

任何提示将不胜感激，感谢所有回答的人。

【问题讨论】：

标签： contenteditable tablesorter

【解决方案1】：

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

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

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

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

【讨论】：