如何使专注于jQuery DataTable的选择单元格

Question

IM使用jQuery数据表

IM使用3个固定柱时，当我从End Row中按Shift+Tab的每个单元格，但某些单元格无法注意到其半场，哪些困难确定了哪个字段用户正在输入。如何使焦点输入字段jQuery数据表？

请参阅下面的偏移+选项卡视频问题

$(document).ready(function() {
  let data = [];
  for (let i = 1; i <= 100; i++) {
    let row = [];
    for (let j = 1; j <= 20; j++) {
      row.push(`<input type='text' value='Row ${i} Col ${j}'>`);
    }
    data.push(row);
  }

  $('#example').DataTable({
    data: data,
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
      left: 3
    }
  });
});

<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Fixed 1</th>
      <th>Fixed 2</th>
      <th>Fixed 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
      <th>Column 11</th>
      <th>Column 12</th>
      <th>Column 13</th>
      <th>Column 14</th>
      <th>Column 15</th>
      <th>Column 16</th>
      <th>Column 17</th>
      <th>Column 18</th>
      <th>Column 19</th>
      <th>Column 20</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

您可以使用一个简单的技巧滚动到聚焦的单元格。

计算最后一个固定列的边界。

输入焦点事件，检查焦点单元是否在固定列后面（通过比较
• getBoundingClientRect
值），如果是，则滚动回到“视图”。

• 脚本是：

let lastFixedTd = $('tr:first-child td.dtfc-fixed-start').last()[0];
let leftPoint = lastFixedTd.getBoundingClientRect().left + lastFixedTd.getBoundingClientRect().width;

$('input').on('focus', (e) => {
  if ($(e.target).closest('td').hasClass('dtfc-fixed-start')) return;

  let left = e.target.getBoundingClientRect().left;
  if(left < leftPoint) {
    console.log('Not visible!')
    let scrollEl = document.getElementsByClassName('dt-scroll-body')[0];
    scrollEl.scrollLeft = scrollEl.scrollLeft - (left + leftPoint);
  } else {
    console.log('Visible!')
  }
})

Full代码片段：

$(document).ready(function() {
      let data = [];
      for (let i = 1; i <= 100; i++) {
        let row = [];
        for (let j = 1; j <= 20; j++) {
          row.push(`<input type='text' value='Row ${i} Col ${j}'>`);
        }
        data.push(row);
      }

      $('#example').DataTable({
        data: data,
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: {
          left: 3
        }
      });

      let lastFixedTd = $('tr:first-child td.dtfc-fixed-start').last()[0];
      let leftPoint = lastFixedTd.getBoundingClientRect().left + lastFixedTd.getBoundingClientRect().width;

      $('input').on('focus', (e) => {
        if ($(e.target).closest('td').hasClass('dtfc-fixed-start')) return;

        let left = e.target.getBoundingClientRect().left;
        if(left < leftPoint) {
          console.log('Not visible!')
          let scrollEl = document.getElementsByClassName('dt-scroll-body')[0];
          scrollEl.scrollLeft = scrollEl.scrollLeft - (left + leftPoint);
        } else {
          console.log('Visible!')
        }
      })
    });

<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Fixed 1</th>
      <th>Fixed 2</th>
      <th>Fixed 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
      <th>Column 11</th>
      <th>Column 12</th>
      <th>Column 13</th>
      <th>Column 14</th>
      <th>Column 15</th>
      <th>Column 16</th>
      <th>Column 17</th>
      <th>Column 18</th>
      <th>Column 19</th>
      <th>Column 20</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>