如何在數據表中的keydown上取消選擇一行

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鍵一樣。

我的第二個問題是，當我按下輸入它顯示第一列數據，但我需要顯示行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>