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

这适用于具有如下行的表：

<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（＆＃39;输入：复选框＆＃39;）我在想）是否是你的单元格on是一个复选框，如果是，请允许.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：使用空格键选中复选框

2 个答案: