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

Question

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

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

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

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

Answer 1

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

Проблема существует, потому что использование 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
        }
    });
};