JQuery Datatables makeEditable() проблемы с большим набором данных

Я после этого учебник для реализации редактирования ячеек в jQuery datatables с MVC4.

ссылки на используемые Плагины:

  1. jQuery DataTables штекер-в v1.7.5., включая необязательные DataTables Таблицы стилей CSS используется для применения стилей по умолчанию на странице
  2. jQuery Jeditable штекер-в v1.6.2., требуется для встроенного редактирования ячейки
  3. jQuery проверка вилка-в v1.7., для реализации клиентской стороны проверка
  4. jQuery DataTables редактируемый плагин, который объединяет все эти упомянутые плагины в полностью функциональный редактируемый datatable.

для достижения эффекта создания редактируемого datatable вам просто нужно включить следующее как часть вашего скрипта

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

Проблема

для каждого столбца, присутствующего в сетке, создается событие Дом, чтобы разрешить редактирование.

где набор данных очень большой, это, как оказалось, вызывает значительные проблемы даже сбой моего браузера.

общий вопрос

можно ли вызвать логику редактирования только тогда, когда пользователь выбирает соответствующий столбец, а не пытается создать большое количество событий в DOM?

9
asp.net-mvc-4 datatables jquery jquery-plugins

4 ответов

в дополнение к ответу @CMedina, пожалуйста, прочитайте:

.на() - прямые и делегированные события

в дополнение к их способности обрабатывать события на дочерних элементах, еще не созданных, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда многие элементы должны контролироваться.

на таблице данных с 1,000 td элементов #example этот пример присоединяет обработчик до 1000 элементы:

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

подход делегирования событий присоединяет обработчик событий только к одному элементу,#example, и событие должно только пузыриться на одном уровне (от нажатого td to #example):

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

Я не использую makeEditable() с очень большими наборами данных, но вы можете получить выгоду от повышения производительности некоторых из ваших версий. Я использую:

  • jquery 1.6.4
  • datatables 1.8.2
  • jeditable 1.7.3
  • плагин проверки jQuery 1.11.1
  • datatables.редактируемые 2.3.1
1

одной из альтернатив является добавление события при нажатии пользователем в 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%",
});
1

можно сделать td редактировать, нажмите:

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