jQuery、DataTables、KeyTables：使用 space 键选中复选框

Question

我在我的脚本中定义了一个 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
});

这适用于 table 行如下所示：

<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); 加空格键。

我似乎无法使用 API.

获得实际的 DOM 元素

到目前为止我得到了：

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'));
});

目前我什至还没有空格键位，我无法越过实际识别元素是否为复选框的障碍。

Answer 1

使用$(node).find('input')查找input元素，因为node是一个DOM元素而find()是一个jQuery方法。

请参阅 this example 进行演示。

有关详细信息，请参阅 jQuery DataTables: How to navigate rows with KeyTable plug-in。

Answer 2

这样就可以了：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"));
            }
        }
    });
});

jQuery、DataTables、KeyTables：使用 space 键选中复选框

jQuery, DataTables, KeyTables: Check checkbox with space key

jquery

dom

datatables

datatables-1.10