jQuery, DataTables, KeyTables: установите флажок с клавишей пробела - PullRequest
Новая
       18

jQuery, DataTables, KeyTables: установите флажок с клавишей пробела

0 голосов
/ 26 апреля 2018

У меня есть DataTable, определенный в моем скрипте. 

var table = $('#dataTable').DataTable({
"lengthMenu": [ [15, 30, 45, 60, -1], [15, 30, 45, 60, "All"] ],
"orderMulti": true,
"stateSave": true,
"pagingType": "full_numbers",
"autoWidth": false,
"pageLength": 15,
"dom": '<C<f><i><l><B<"clear">><p>rt>',
buttons: [
    {
        extend:    'copyHtml5',
        text:      '<i class="fa fa-copy"></i>',
        titleAttr: 'Copy'
    },
    {
        extend:    'excelHtml5',
        text:      '<i class="fa fa-file-excel"></i>',
        titleAttr: 'Excel'
    },
    {
        extend:    'csvHtml5',
        text:      '<i class="fa fa-file-alt"></i>',
        titleAttr: 'CSV'
    },
    {
        extend:    'pdfHtml5',
        text:      '<i class="fa fa-file-pdf"></i>',
        titleAttr: 'PDF'
    }
],
'keys': true
});

Это работает для таблицы со строками, которые выглядят так: 

<tr>
    <td><input class="checkboxRun" data-run_id="1" type="checkbox"></td>
    <td><a href="url here">2018-03-27T15:59:50.163000</a></td>
    <td><a href="url here">Name</a></td>
    <td><a >0:00:01.076000</a></td>
    <td><a >None</a></td>
    <td><a >No scores yet.</a></td>
</tr>

Первая ячейка в каждой строке, это флажок. Некоторое время я пытался создать небольшой скрипт, который будет проверять (через .find ('input: checkbox'), я думаю), является ли ячейка, в которой вы находитесь, флажком, и если да, разрешить .prop('checked', this.checked); с пробелом.

Кажется, я не могу получить фактический элемент DOM с помощью API.

Пока я получил: 

table.on( 'key-focus', function () {

    // The cell, returns an API object, but I don't know how to get the DOM
    // element from this API object
    var cell = table.cell( { focused: true });

    // The node, returns the actual TD, seemingly as an object.
    // I can't seem to be able to do node.find('input'); though, it says
    // node.find is not a function, so I suspect it's not an actual DOM
    // element?
    var node = table.cell( { focused: true } ).node();

    // The data, returns raw HTML as a string
    var data = table.cell( { focused: true } ).data();

    // This doesn't work. Gives an error (node.find is not a function)
    console.log(node.find('input'));
});

Пока у меня пока нет даже клавиш пробела, я не могу преодолеть препятствие на самом деле, чтобы определить, является ли элемент даже флажком.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Это поможет: http://live.datatables.net/nijizuco/1/edit 

$(document).ready(function() {
    var table = $('#example').DataTable({
        keys: {
            keys: [32, "\t".charCodeAt(0)]
        }
    });

    table.on('key', function(e, datatable, key, cell, originalEvent) {
        if (key === 32) {
            if ($(cell.node()).find('input').hasClass('checkboxRun')) {
                var checkBox = $(cell.node()).find('input');
                checkBox.prop("checked", !checkBox.prop("checked"));
            }
        }
    });
});
0 голосов
/ 26 апреля 2018

Используйте $(node).find('input'), чтобы найти input элемент, потому что node является элементом DOM, а find() является методом jQuery.

См. этот пример для демонстрации.

См. jQuery DataTables: как перемещаться по строкам с помощью подключаемого модуля KeyTable для получения более подробной информации.

...