Question

我正在使用datatables。尝试一起使用select和keytable功能。请参阅this jsfiddle。

$(document).ready(function() {
  $('#data-table')
    .DataTable({
      "select": {
        "style": "os"
      },
      "keys": true
       }).on('key-focus', function() {
      $('#data-table').DataTable().row(getRowIdx()).select();
    })
    .on('click', 'tbody td', function() {
      var rowIdx = $('#data-table').DataTable().cell(this).index().row;
      $('#data-table').DataTable().row(rowIdx).select();
    }).on('key', function(e, datatable, key, cell, originalEvent) {
      if (key === 13) {
        var data = $('#data-table').DataTable().row(getRowIdx()).data();
        $("#output").html("Code: " + data[0] + ". Description: " + data[1]);
      }
    });
});

function getRowIdx() {
  return $('#data-table').DataTable().cell({
    focused: true
  }).index().row;
}

它几乎完美无缺，除非按下键不会取消选中我点击的第一行。它的作用就像我按下了shift键一样。

我的第二个问题是，当我按Enter键时显示第一列数据，但我需要显示行ID。

如果你能帮助我解决这两个问题，我将非常感激

Answer 1

您需要在select()

之前使用deselect()所有行

还会将$('#data-table').DataTable()的引用保留为table，而不是每次都调用它。

$(document).ready(function() {
  var shiftKey, ctrlKey, table = $('#data-table').DataTable({
      select: { style: 'os' },
      keys: true
    }).on('key-focus', function() {
      if(!shiftKey && !ctrlKey) table.rows().deselect();
      table.row(getRowIdx()).select();
    })
    .on('key', function(e, datatable, key, cell, originalEvent) {
      if (key === 13) {
        var data = table.row(getRowIdx()).data();
        $('#output').html('Code: ' + data[0] + '. Description: ' + data[1]);
      }
    });
    
  function getRowIdx() {
    return table.cell({ focused: true }).index().row;
  }
  $(document).on('keyup keydown', function(e){
    shiftKey = e.shiftKey;
    ctrlKey = e.ctrlKey;
    return true; 
  });
});

table.dataTable th.focus,
table.dataTable td.focus {
  outline: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/keytable/2.1.1/css/keyTable.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/keytable/2.1.1/js/dataTables.keyTable.min.js"></script>

<div>Result: <span id="output"></span></div><br/>
<table id="data-table" class="display compact articulos table0">
  <thead><tr><th>Code</th><th>Description</th></tr></thead>
  <tbody>
    <tr id="1001"><td>1</td><td>Description 1</td></tr>
    <tr id="1002"><td>2</td><td>Description 2</td></tr>
    <tr id="1003"><td>3</td><td>Description 3</td></tr>
    <tr id="1004"><td>4</td><td>Description 4</td></tr>
    <tr id="1005"><td>5</td><td>Description 5</td></tr>
  </tbody>
</table>

如何在数据表中的keydown上取消选择一行

1 个答案: