Использование DataTable FixedColumns и JEditable вместе

Question

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

Проблема в том, что всякий раз, когда вы используете DataTable's FixedColumns plugin

new $.fn.dataTable.FixedColumns(grid, { 
      leftColumns: 2, 
    }); 

в сочетании с JEditable вы обнаружите, что вы не можете изменить эти замороженные столбцы (т.е. here). Поэтому я стремился обеспечить решение для этого, который я объясню в ответе

Answer 1

Решение может быть найдено here, но я объясню ниже

Проблема существует, потому что использование FixedColumns создает две таблицы; одна таблица, таблица клонов (обозначается именем класса DTFC_CLONED, состоит только из столбцов, которые вы хотели заморозить.) Другая таблица - это созданная исходная таблица. Поэтому всякий раз, когда вы пытаетесь сделать редактирование, в моем примере используется встроенное редактирование, вы фактически делаете редактирование в исходном поле, а не поле, которое создано из таблицы клонирования.

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

new $.fn.dataTable.FixedColumns(grid, { 
     leftColumns: 3, 
     fnDrawCallback:function(){ 
      clone_grid_init(); 
     } 
}); 

clone_grid_init()

//Allows editing of fixed fields 
function clone_grid_init(){ 
    $('.DTFC_Cloned tbody tr').each(function(nRow){ 
     $('td:gt(0)', this).addClass('editText_clone'); //apply new class to tds 
    }); 

    $('.editText_clone').editable(theCallBack, { 
     indicator : "<img src='resources/images/indicator.gif'>", 
     tooltip : "Double Click to edit...", 
     event  : "dblclick", 
     style : "inherit", 
     submit : '<span class="fa fa-check"></span>', 
     cancel : '<span class="fa fa-close"></span>', 
     placeholder:"", 
     callback : function (sValue, y){ 
      var col = $(this).parent().children().index($(this));//get col index of field from clone table 
      var row = $(this).parent().parent().children().index($(this).parent());//get row index of field from clone table 
      //var aPos = grid_clone.fnGetPosition(this); // Get the position of the current data from the node 
      grid.fnUpdate(sValue, row, col);// Update the original table with the new value 
      return sValue.trim(); //return the new value for the clone table 
     } 
    }); 
};