JQuery 大型数据集的数据表 makeEditable() 问题

Question

我正在按照此 tutorial 使用 MVC4 在 JQuery 数据表中实现单元格编辑。

所用插件的链接是：

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

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

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

问题

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

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

总题

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

Answer 1

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

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

Answer 2

一种替代方法是在用户点击 td 时添加事件。

$(document).ready(function() {

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

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

});

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

现在，如果您不想编辑所有列，您可以为每个 class

的某些列分配仅可编辑的事件

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%",
});

Answer 3

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

.on() - Direct and delegated events

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored.

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

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

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

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

Answer 4

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

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

JQuery 大型数据集的数据表 makeEditable() 问题

JQuery Datatables makeEditable() issues with large dataset

jquery

jquery-plugins

datatables

asp.net-mvc-4

问题

总题