轻松征服表格勾选场景，拿来即用！

2023-05-07 06:10:33

表格勾选攻略：一网打尽，让表格不再头疼！

前端小伙伴们，当谈到表格勾选时，你们是不是会感到一丝头疼？表单搜索、表头搜索、数据量过大...这些问题是不是经常困扰着你？别担心，今天就让这篇终极攻略来帮你解决这些难题，分分钟搞定表格勾选！

一、表单搜索：轻松找到所需数据

想象一下，当你在一张表格中寻找某条特定记录时，表单搜索就是你的救星。只需在表格上方添加一个搜索框，输入你要查找的内容，就能快速定位到目标数据。为了更灵活地搜索，你还可以添加模糊匹配、范围搜索等高级条件。

<input type="text" placeholder="搜索..." id="search-field" />

const searchField = document.getElementById("search-field");

searchField.addEventListener("input", (e) => {
  const searchText = e.target.value;
  // 在表格中过滤并显示符合条件的数据
});

二、表头搜索：直观浏览，快速定位

在表格中，表头搜索功能就像一个指针，能让你迅速找到特定列的数据。只需在表格的表头添加一个搜索框，输入你要查找的内容，就能轻松定位到对应的列。同样，你也可以添加高级搜索条件，让搜索更加精准。

<input type="text" placeholder="搜索列..." id="header-search-field" />

const headerSearchField = document.getElementById("header-search-field");

headerSearchField.addEventListener("input", (e) => {
  const searchText = e.target.value;
  // 在表格的表头中过滤并显示符合条件的列
});

三、数据量过大？后端稳如泰山

当表格中的数据量激增时，后端可是个关键角色。为了避免服务器崩溃，我们可以采用以下优化手段：

1. 分页加载：分而治之

将表格数据分成多页，每次只加载当前页的数据。当用户翻页时，再加载下一页。这样既能减轻后端压力，又能让页面加载更顺畅。

// 假设每页显示 10 条数据
const pageSize = 10;

// 获取当前页码
const currentPage = parseInt(window.location.search.substring(1));

// 从后端获取指定页码的数据
const data = await fetch(`/data?page=${currentPage}&size=${pageSize}`);

2. 虚拟滚动：滚动加载

只加载当前视口范围内的数据，当用户滚动表格时再加载更多数据。这种方式可以显著减少数据传输量，提升用户体验。

const table = document.getElementById("table");

table.addEventListener("scroll", (e) => {
  // 判断是否滚动到底部
  if (table.scrollTop + table.clientHeight >= table.scrollHeight) {
    // 加载更多数据
  }
});