大型数据集的 JQuery Datatables makeEditable() 问题答案

【问题标题】：JQuery Datatables makeEditable() issues with large dataset大型数据集的 JQuery Datatables makeEditable() 问题
【发布时间】：2016-07-12 11:07:43
【问题描述】：

我正在关注tutorial 以使用 MVC4 在 JQuery 数据表中实现单元格编辑。

所用插件的链接是：

jQueryDataTables插件v1.7.5.，包括可选的DataTables 用于在页面上应用默认样式的 CSS 样式表
jQuery Jeditable插件v1.6.2.，内联单元格编辑需要
jQueryvalidation插件v1.7.，客户端实现验证
jQuery DataTables 可编辑插件，集成了所有这些提到的插件到一个功能齐全的可编辑数据表中。

要达到创建可编辑数据表的效果，您只需在脚本中包含以下内容

<script>
    $(document).ready(function () {
       $('#myDataTable').dataTable().makeEditable();
    });
</script>

问题

对于网格中存在的每一列，都会在 DOM 中创建一个事件以允许编辑。

在数据集非常大的情况下，这已被证明会导致严重问题，甚至使我的浏览器崩溃。

整体问题

是否可以仅在用户选择适当的列时调用编辑逻辑，而不是尝试在 DOM 中构建大量事件？

【问题讨论】：

我不熟悉这个库，但是我建议检查是否支持视图和存储过程，然后您可以自定义所需的列数。

标签： jquery asp.net-mvc-4 jquery-plugins datatables

【解决方案1】：

除了@CMedina 的回答，请阅读：

.on() - Direct and delegated events

除了能够处理尚未创建的后代元素上的事件外，委托事件的另一个优点是当必须监视许多元素时，它们的开销可能会大大降低。

在#example 中包含1,000 个td 元素的数据表上，此示例将处理程序附加到1,000 个元素：

$("#example td").on("click",function(){
    $(this).editable();
})

事件委托方法仅将事件处理程序附加到一个元素#example，并且事件只需要冒泡一个级别（从单击的td 到#example）：

$("#example").on("click", "td", function(){
    $(this).editable();
})

【讨论】：

【解决方案2】：

我不会对非常大的数据集使用 makeEditable()，但您可能会从提升某些版本中获得性能优势。我正在使用：

jquery 1.6.4
数据表 1.8.2
jeditable 1.7.3
jQuery 验证插件 1.11.1
datatables.editable 2.3.1

【讨论】：

只是添加，您可以使用 aocolumns 使列在初始化时可编辑，但数据表文档建议它们此后无法更改。您可以重新加载页面以编辑特定列，但那是糟糕的用户体验
主要问题是它们不是海量数据集，大约 4000 行给或取 1000。现在我最初的反应是，通过事件委托可以解决这个问题，但不幸的是我不方便使用插件这让我陷入了困境。感谢您的回答
基本上你想做的是将方法绑定到一列，并从另一列取消绑定方法。每次您想要切换时都会触发大量事件，其大小与加载时触发的事件数相似（屏幕上列数的比例）。更新您的库可能会导致使用改进的 jquery 触发更少的事件，而编程成本也很低。

【解决方案3】：

另一种方法是在用户单击 td 时添加事件。

$(document).ready(function() {

    oTable = $('#example').dataTable();

    $("#example td").on("click",function(){
        $(this).editable();
    })

});

示例：https://jsfiddle.net/cmedina/7kfmyw6x/32/

现在，如果您不想编辑所有列，您可以为每个班级的某些列分配可编辑的事件

var oTable = $('#table_id').dataTable(
    {
         "bSort": false,
         "sPaginationType": "full_numbers",
    });

$('td.editable_class', oTable.fnGetNodes()).editable('editable.php', {
"callback": function( sValue, y ) {
    var aPos = oTable.fnGetPosition( this );
    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
    return {
        "row_id": $(this).data('id'),
        "column": $(this).data('column'),
    };
},
"height": "17px",
"width": "100%",
});

【讨论】：

【解决方案4】：

您可以使td 在点击时可编辑：

$("#example td").on("click",function(){
    $(this).editable();
})

【讨论】：