如何从垂直存储的SQL表提取数据并赋值到前端UI Grid展示

1. 后端数据查询逻辑 #

直接使用带参数的SQL语句按选中的P_ID过滤即可，无需额外做行转列操作，当前的表结构同P_ID下每行数据刚好对应前端Grid的一行展示内容：

-- ? 为P_ID参数占位符，实际调用时传入下拉框选中值，需使用参数化查询避免SQL注入
SELECT `Product name`, IsLaunched, Exp_Price FROM product WHERE P_ID = ?

当传入参数为2时，查询返回结果如下，可直接返回给前端使用：

2. 前端联动实现步骤 #

• 给下拉框绑定change事件，选中值变更时触发数据拉取
• 将选中的P_ID值作为请求参数调用后端查询接口
• 拿到接口返回的数组后，直接遍历渲染到Grid表格的tbody节点即可，表头固定不用修改

示例极简JS代码参考：

// 下拉框元素
const pidSelect = document.getElementById('pid-select');
// Grid表格tbody元素
const gridTbody = document.querySelector('.s-table tbody');

pidSelect.addEventListener('change', async () => {
  const selectedPid = pidSelect.value;
  // 调用后端接口拿数据
  const res = await fetch('/api/getProductByPid', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({p_id: selectedPid})
  });
  const productList = await res.json();
  // 渲染表格
  gridTbody.innerHTML = productList.map(item => `
    <tr>
      <td>${item['Product name']}</td>
      <td>${item.IsLaunched}</td>
      <td>${item.Exp_Price}</td>
    </tr>
  `).join('');
})

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