SQLite技术问题：如何根据ID获取同组的所有行？

嘿，这个需求在表格交互里太常见了，我分两种场景给你具体讲讲怎么实现～

场景一：前端本地已有全部数据 #

如果你的表格数据已经一次性加载到前端了，直接用JS数组方法就能搞定：

步骤1：假设你的数据结构 #

先举个常见的数据例子，每一行都包含id和组标识（比如groupId）：

const tableData = [
  { id: 1, groupId: 10, name: "张三", age: 25 },
  { id: 2, groupId: 10, name: "李四", age: 26 },
  { id: 3, groupId: 20, name: "王五", age: 27 },
  { id: 4, groupId: 10, name: "赵六", age: 28 }
];

步骤2：点击事件处理逻辑 #

在onClick方法里拿到选中的id后，先找到该行的组标识，再筛选出同组的所有数据：

// 假设这是你的行点击回调函数
function handleRowClick(selectedId) {
  // 1. 先根据id找到当前选中的行
  const targetRow = tableData.find(row => row.id === selectedId);
  
  // 做个容错：如果没找到对应id的行，直接返回
  if (!targetRow) {
    console.warn(`未找到id为${selectedId}的行`);
    return;
  }

  // 2. 筛选出所有同组的数据
  const sameGroupRows = tableData.filter(row => row.groupId === targetRow.groupId);

  // 3. 接下来就可以用这些数据做展示（比如弹窗显示、高亮行等）
  console.log("同组数据：", sameGroupRows);
}

// 示例：点击id为2的行时调用
handleRowClick(2);

场景二：数据存在后端数据库（需要接口查询） #

如果数据量很大，或者需要实时从数据库获取，就得通过后端接口来查询：

步骤1：后端SQL查询逻辑 #

假设你的表名为user_table，包含id和group_id字段，后端可以用两种方式写查询：

方式1：嵌套子查询

-- 用占位符?防止SQL注入，不要直接拼接字符串！
SELECT * FROM user_table 
WHERE group_id = (SELECT group_id FROM user_table WHERE id = ?);

方式2：表自连接

SELECT t1.* FROM user_table t1
JOIN user_table t2 ON t1.group_id = t2.group_id
WHERE t2.id = ?;

步骤2：前端调用接口 #

用fetch或者axios发送请求，拿到同组数据：

// 用async/await写异步请求
async function fetchSameGroupData(selectedId) {
  try {
    // 这里替换成你的后端接口地址
    const response = await fetch(`/api/get-same-group?selectedId=${selectedId}`);
    
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const sameGroupRows = await response.json();
    // 拿到数据后处理展示
    console.log("同组数据：", sameGroupRows);
  } catch (error) {
    console.error("获取同组数据出错：", error);
  }
}

// 点击行时调用
fetchSameGroupData(2);

几个注意点 #

• 前端容错：不管是本地处理还是接口请求，都要考虑找不到对应id的情况，避免报错；
• 后端安全：一定要用参数化查询（比如上面的?），禁止直接拼接SQL字符串，防止SQL注入；
• 字段适配：如果你的“组”不是用groupId/group_id，替换成你实际的组标识字段就行。

内容的提问来源于stack exchange，提问作者Zeljo