Расширение автозаполнения DataTables с неработающими элементами ввода
контекст
Я использую плагин dataTables с расширением AutoFill. Это в основном позволяет вам скопировать ячейку, потянув крест (внизу справа) вверх или вниз по столбцу. Это отлично работает в моем проекте.
проблема
Однако, когда я пытаюсь скопировать вход внутри ячейки, он очищает выбранные входы. Читая документы, кажется, что старая версия плагина позволяет копировать входные данные внутри ячеек, просто добавив небольшой скрипт. Из текущего документа, глядя на write
опция, поведение, которое я ищу, должно быть возможно по умолчанию:
Этот обратный вызов является следствием fnRead, предоставляя метод для настройки того, как AutoFill записывает вычисленное значение заполнения в данную ячейку. По умолчанию автозаполнение установит значение во входном элементе или выделит элемент в ячейке, если он найден, в противном случае будет установлено значение HTML.
Дело в том, что когда вход имеет начальное значение, копирование работает. Но при добавлении / редактировании значения оно копирует предыдущее. Он попытался добавить опции функции чтения и записи, но они никогда не вызывались (см. Fiddle).
Код
Вот jsFidle, воспроизводящий именно мою проблему:
- Перетащите строку с 1 по 1 в строку 2 с.1 -> работает
- Отредактируйте значение строки 1 столбца 1 и повторите шаг 1 -> возвращается к предыдущему значению
- Введите значение в row.1 col.2 и перетащите его вниз -> сброс значений без копирования
Кажется, что атрибут value никогда не обновляется.
1 ответ
Вам нужно использовать read
а также write
обратные вызовы для извлечения и установки значений <input>
элементы.
Также кажется, что автозаполнение пытается увеличить значения по умолчанию. Я должен был добавить step
обратный вызов, чтобы переопределить это поведение.
new $.fn.dataTable.AutoFill(table, {
"columnDefs": [{
"read": function (cell) {
return $('input', cell).val();
},
"write": function (cell, val) {
return $('input', cell).val(val);
},
"step": function ( cell, read, last, i, x, y ) {
return last === undefined ? read : last;
},
"targets": [0,1,2] // Use "_all" to target all columns
}]
});
Смотрите этот JSFiddle для кода и демонстрации.