js实现的GridView即表头固定表体有滚动条且可滚动

实现表头固定、表体有滚动条且可滚动的GridView，主要可以使用CSS的position属性和JavaScript来实现。

CSS部分

首先，需要对表格的样式进行设置，使其具有滚动条，并且表头可以固定。

固定表头

通过设置表头的position为sticky，即可使其跟随滚动条滚动时保持在页面顶部。如下所示：

th {
  position: sticky;
  top: 0;
  z-index: 10;
}

滚动条

要使表体具有滚动条，可以设置表格的容器为一个固定高度的div，并将其overflow属性设置为scroll。如下所示：

<div style="height: 300px; overflow: scroll;">
  <table>
    // ...
  </table>
</div>

JavaScript部分

为了使表头和表格体能够同时滚动，需要在滚动事件中分别设置表头和表格体的位置。

获取DOM元素

在JavaScript中，需要获取表头和表格体的DOM节点，代码示例如下：

const table = document.querySelector('table');
const header = document.querySelector('thead');
const body = document.querySelector('tbody');

设置表头位置

在滚动事件中，可以获取滚动条距离顶部的距离，然后将表头的top属性设置为这个距离，保持表头跟随滚动条滚动。代码示例如下：

window.addEventListener('scroll', () => {
  header.style.top = `${window.scrollY}px`;
});

设置表格体位置

同样地，在滚动事件中将表格体的相对位置设为滚动条的位置即可。代码示例如下：

window.addEventListener('scroll', () => {
  body.style.transform = `translateY(${window.scrollY}px)`;
});

示例说明

下面的示例演示了基于上述方法实现表头固定、表体有滚动条且可滚动的GridView：

示例一

<div style="height: 300px; overflow: scroll;">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
      </tr>
      // ...
    </tbody>
  </table>
</div>

示例二

<div style="height: 300px; overflow: scroll;">
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>生日</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>张三</td>
        <td>2000-01-01</td>
        <td>北京市朝阳区</td>
      </tr>
      // ...
    </tbody>
  </table>
</div>