多条目表单中基于上一行实现动态下拉菜单的技术问询

核心思路 #

无需直接引用子表单上一行数据，而是通过当前路由的最大路由序号对应的节点作为起点，结合数据库中的拓扑连接对，动态生成符合要求的下拉选项列表。

具体实现步骤 #

• 实时获取当前路由的最大序号节点：在子表单新增行时，查询当前主路由关联的所有路由-节点对，筛选出路由序号值最大的记录，提取对应的节点标识。
• 关联拓扑数据筛选邻接节点：以拿到的节点为查询条件，在拓扑连接对表中查找所有与之直接相连的节点（即一步可达的节点），注意要处理双向连接的情况（A连B等价于B连A）。
• 动态渲染下拉菜单：将筛选出的邻接节点作为下拉选项，替换原本显示全量节点的列表。

关键代码示例（伪代码） #

// 子表单新增行时触发的逻辑
function handleAddSubRow(mainRouteId) {
  // 1. 查询当前路由下序号最大的节点
  const latestNode = db.query(`
    SELECT node_id FROM route_node_pairs 
    WHERE route_id = ? 
    ORDER BY route_seq DESC LIMIT 1
  `, [mainRouteId]);

  // 2. 查询该节点的所有邻接节点（处理双向连接）
  const adjacentNodes = db.query(`
    SELECT DISTINCT n.node_id, n.node_name 
    FROM topology_links tl
    JOIN nodes n ON tl.target_node_id = n.node_id
    WHERE tl.source_node_id = ?
    UNION
    SELECT DISTINCT n.node_id, n.node_name 
    FROM topology_links tl
    JOIN nodes n ON tl.source_node_id = n.node_id
    WHERE tl.target_node_id = ?
  `, [latestNode.node_id, latestNode.node_id]);

  // 3. 更新下拉菜单选项
  const nodeSelect = document.getElementById('subform-node-select');
  nodeSelect.innerHTML = '';
  adjacentNodes.forEach(node => {
    const option = document.createElement('option');
    option.value = node.node_id;
    option.textContent = node.node_name;
    nodeSelect.appendChild(option);
  });
}

额外注意事项 #

• 若为首次添加子表单行（无任何路由-节点对），可默认显示全量节点，或预先指定路由的起始节点作为初始选项。
• 需确保路由序号的唯一性，避免重复序号导致最大序号查询结果异常。
• 若使用低代码平台，可通过平台的数据联动功能实现：先获取当前路由的最大序号节点，再以该节点为筛选条件关联拓扑表，自动生成动态下拉选项。

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