Question

我正在使用数据表和列大小库来调整列的大小。在列大小库中，th上的“ mousedown”可防止默认设置。 ColReorderWithResize Plug-in

       $(nTh)
            .on( 'mousedown.ColReorder', function (e) {
                e.preventDefault();
                if (e.which == 1) {
                    that._fnMouseDown.call( that, e, nTh, i );
                }
            } )
            .on( 'touchstart.ColReorder', function (e) {
                that._fnMouseDown.call( that, e, nTh, i );
            } );

尽管我在表头输入字段上使用event.stopPropagation（），但它们仍然不可单击。但是，我可以浏览并输入文字。有没有一种方法可以解决此问题，而无需修改/破坏父库。

JSFiddle将有助于测试问题。

Answer 1

为解决您的问题，您需要在单击时.focus()输入。因此，您可以编写和应用排序...

$("#example > thead > tr > th:first").html("<input type='text' placeholder='Name'>")
var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays.json',
    'dom': 'Rlfrtip',
    'colReorder': {
        'allowReorder': false
    }
});

$("#example > thead > tr > th:first input").on('click', function (e) {
    e.stopPropagation();
    $(this).focus();
}).on('input', function (e) {
    table.column(0).search(this.value, true).draw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jeffreydwalter/ColReorderWithResize@9ce30c640e394282c9e0df5787d54e5887bc8ecc/ColReorderWithResize.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th class="no-sort">Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>

Answer 2

找到了可行的解决方案。由于库事件在mousedown时触发，因此将其添加为输入中的侦听器。

$('input', table.column(colIdx).header()).on('mousedown click', function(e) {
  e.stopPropagation();
});

还具有click，因为这样可以防止其在点击时进行不适当的排序。但是，我不确定拥有多个侦听器是否会影响具有较大编号的页面的性能。行。

无法单击表标题标签内的输入字段

2 个答案: