我有两种代码变体,每种变体都有一个理想的行为,一种不受欢迎的行为...但我不明白为什么会发生这种情况,或者如何将它们结合起来以获得所需的行为。 (我尝试了if / else语句的不同变体试图在一个代码中获得所需的两种行为,但到目前为止我还是不成功。
变化1:http://jsfiddle.net/crashvector/q81m7sab/15/
正确行为:您可以选择一行,更改显示的下拉列表(下拉值写入表格),然后您可以取消选择该行。 (check-uncheck列从1更新为0.)
不期望的行为:您可以选择一行,然后立即取消选择它。 check-uncheck列从1更新为0,但下拉列表不会将当前值写入表中并消失。
}).on('deselect', function (e, dt, type) {
var dt_indexes = dt[0]
if (type === 'row') {
$.each( dt_indexes, function ( index ) {
var row = dataTable.row( dt_indexes[index] );
if(!Category && !Category.length) {
writeCell($(row.node()).find('select'));
};
toggleDataAndDraw(row, type, 0);
} );
}
dataTable.draw();
});
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(
currentRow.data().Category
);
currentRow.draw();
};
变化2:http://jsfiddle.net/crashvector/q81m7sab/16/
正确的行为:您可以选择一行,然后立即取消选择它。 check-uncheck列从1更新为0,下拉值写入表并消失。
不期望的行为:您可以选择一行,更改显示的下拉列表(下拉值写入表格),然后您可以取消选择该行。但是,check-uncheck列不会从1更新为0。
}).on('deselect', function (e, dt, type) {
var dt_indexes = dt[0]
if (type === 'row') {
$.each( dt_indexes, function ( index ) {
var row = dataTable.row( dt_indexes[index] );
//if(!Category && !Category.length) {
writeCell($(row.node()).find('select'));
//};
toggleDataAndDraw(row, type, 0);
} );
}
dataTable.draw();
});
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(
currentRow.data().Category
);
currentRow.draw();
};
结束目标一个既具有正确行为又不具有不良行为的功能。
从您的jsFiddle“Variation 1”...只需更改条件(在#222行):
if(!Category && !Category.length) {
至:
if($(row.node()).find('select').length){
因此,当用户取消选中行时,如果writeCell()
仍然存在,它将执行<select>
。