РЕДАКТИРОВАТЬ: исходный неправильный код
Я использую DataTables, чтобы мои пользователи выбирали строки.Одно из полей заполняет раскрывающийся список, в котором они могут выбирать различные значения.
Проблема в том, что если пользователь отменяет выбор строки БЕЗ изменения выпадающего меню, выпадающий список div НЕ исчезает.
Мне нужноспособ записи значения раскрывающегося списка по умолчанию в таблицу при отмене выбора.
Fiddle: http://jsfiddle.net/crashvector/q81m7sab/15/
//Write dropdown value into table
var writeCell = dropdown => {
var currentRow = dataTable.row(dropdown.closest('tr'));
var rowData = currentRow.data();
rowData.Category = dropdown.val();
$(currentRow.node()).find('td:eq(6)').html( //change to td:eq(4) in final version
currentRow.data().Category
);
currentRow.draw();
};
//triggers on select/deselect to move selected rows to top of table and
//add dropdown menu for Category column
dataTable.on('select', function (e, dt, type) {
console.log('select', dt[0].length)
var dt_indexes = dt[0] //Need to access dt[0] to get row indexes
if (type === 'row') {
// Loop through each selectes row
$.each( dt_indexes, function ( index ) {
var row = dataTable.row( dt_indexes[index] );
// Guard clause to check the row length, return if falsey
if (!row.length) {
return;
}
$(row.node()).find('td:eq(6)').html( //change to td:eq(4) in final version
'<select >' + Category.reduce((options, item) =>
options += `<option value="${item}" ${
item == row.data().Category ? 'selected' : ''}>${
item}</option>`, '') + '</select>'
).on('change', function () {
var optionSelected = $('option:selected', this);
// changed this.value to optionSelected()
var valueSelected = $(optionSelected).val();
var row = $(this).closest('tr');
var cell = dataTable.cell(row, 6);
cell.data(valueSelected);
});
console.log('toggle')
toggleDataAndDraw(row, type, 1);
});
}
dataTable.draw();
//Deselect doesn't hide the Category dropdown. Needs to write current value to table.
}).on('deselect', function (e, dt, type) {
console.log('deselect', dt[0].length)
var dt_indexes = dt[0] //Need to access dt[0] to get row indexes
if (type === 'row') {
//for (i=0; i < dt_indexes.length; i++) {
//var row = dataTable.row(dt_indexes[i]);
$.each( dt_indexes, function ( index ) {
var row = dataTable.row( dt_indexes[index] );
//
//
//
//use the guard statement again to fix error when deselecting cells
//that have the category value set?
if(!Category && !Category.length) {
writeCell($(row.node()).find('select'));
};
//if Category isn't defined, set Category to current row/column 6 value and writeCell
//else if Category is defined, writeCell
//
//
//
toggleDataAndDraw(row, type, 0);
} );
}
dataTable.draw();
});
//This function is called to write the check-uncheck value and redraw the table
var toggleDataAndDraw = (row, type, dataVal) => {
if (type === 'row') {
console.log('toggle');
dataTable.cell({
row: row.index(),
column: 0,
visible: false
}).data(dataVal);
//dataTable.draw();
}
};