DataTables + флажки ввода не работают

0

У меня есть некоторые флажки, которые работают нормально, но когда я пытаюсь запрограммировать их значение в следующем слушателе, я могу только проверить/снять флажки с помощью щелчка по строке таблицы, а не пометить:

$('body').on('click', '#sourceTable tbody tr', function() {

var r = dTable.fnGetData(this);
var boxId = r[2].substr(r[2].indexOf("id")+4, 7);

if (document.getElementById(boxId).checked){   //checked is true
    document.getElementById(boxId).checked=false;   //uncheck the box
}
else{
    document.getElementById(boxId).checked=true;   //check the box
}
});

Любая идея, как я могу сделать то и другое?

EDIT: с учетом изменений, указанных в ответе ниже, только флажки можно изменять без строк, данные не считываются из строки DataTable:

$('#sourceTable tbody tr, #sourceTable tbody tr td input').click(function (e) {

e.stopPropagation();
var r = dTable.fnGetData('#sourceTable tbody tr');
var boxId = r[2].substr(r[2].indexOf("id")+4, 7);
//alert($(boxId).val());

if (document.getElementById(boxId).checked){
    document.getElementById(boxId).checked=false;
    var i = PEMSToDisplay.indexOf(r[0]);
    if(i != -1) {
        PEMSToDisplay.splice(i, 1);
    }
}
else{
    document.getElementById(boxId).checked=true;
    PEMSToDisplay.push(r[0]);
}
});
Теги:
datatables

2 ответа

1
Лучший ответ

Когда вы нажимаете на этот флажок, браузер выполняет действие по умолчанию для mousedown/mouseup (изменение состояния флажка), тогда ваш обработчик запускается правильно, и флажок снова меняет состояние.

Смотрите эту скрипку:

$('body').on('click', '.foobar',  function(){
    var chk = $('#cb').prop( 'checked' );
    $('#cb').prop( 'checked', !chk );
    var after = $('#cb').prop( 'checked' );

    console.log('before :', chk, 'after :', after);
});

Обратите внимание, что при щелчке по флажку начальное состояние не совпадает с тем, которое вы видите - браузер уже изменил состояние флажка перед выполнением обработчика click.

Один из способов изменить обработчик: если цель события click - это флажок, ничего не делайте:

$('body').on('click', '.foobar', function(e){
    if( !$(e.target).is('#cb') ){
        var chk = $('#cb').prop('checked');
        $('#cb').prop('checked', !chk );
    }
});

играть на скрипке


Примечание. Сначала я думал, что вы можете предотвратить изменение состояния флажка с помощью e.preventDefault(), но это не сработало - не удалось добиться успеха в mousedown и mouseup.

  • 0
    Это помогло мне это исправить, теперь это работает. Спасибо!
1

Вам нужно настроить таргетинг как на строку таблицы #sourceTable tbody tr и на флажок, который, как я полагаю, будет выглядеть как #sourceTable tbody tr td input. После этого вам нужно будет остановить событие click от пузырьков дерева DOM от входа в строку таблицы, вызывая оба из них, используя stopPropagation.

$('#sourceTable tbody tr, #sourceTable tbody tr td input').click(function (e) {
    e.stopPropagation();
    ...

Вам также потребуется заменить this на $('#sourceTable tbody tr') поскольку this может быть либо строка, либо флажок.

Изменить: согласно комментариям, это будет лучше:

$('#sourceTable tr, #sourceTable input').click(function (e) {    
    e.stopPropagation();
    var r = dTable.fnGetData($(this).closest('tr').get(0));
    ...
  • 0
    @ gjw80 Пожалуйста, не могли бы вы привести пример вашей разметки, как это работает для меня, с простой таблицей, содержащей входные данные для флажков.
  • 0
    var r = dTable.fnGetData('#sourceTable tbody tr'); должно быть var r = dTable.fnGetData($('#sourceTable tbody tr')); это помогает?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню