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

In addition to @CMedina 's answer, please read:

.on() - Direct and delegated events

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

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

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

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

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

Answer 2

我没有对非常大的数据集使用makeEditable（），但是你可能会从某些版本的提升中获得性能优势。我正在使用：

jquery 1.6.4
datatables 1.8.2
jeditable 1.7.3
jQuery Validation Plugin 1.11.1
datatables.editable 2.3.1

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

Answer 4

您可以点击td进行编辑：

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

JQuery Datatables使用大数据集makeEditable（）问题

问题

整体问题

4 个答案: