Ag-Grid技术需求：用两个子行替换单个子行并按指定布局展示

核心需求：

• 从搜索选中的项目中，点击「替换」按钮后立即添加对应行
• 选中的两个项目中，一个与主行显示在同一行，另一个单独显示在下一行
• 新增的两行需关联同一个复选框（状态同步）

HTML结构 #

<div class="container">
  <div class="search-area">
    <input type="text" id="searchInput" placeholder="搜索项目..." />
    <select id="projectSelect" multiple size="3">
      <option value="项目A">项目A</option>
      <option value="项目B">项目B</option>
      <option value="项目C">项目C</option>
      <option value="项目D">项目D</option>
    </select>
    <button id="replaceBtn">替换</button>
  </div>

  <table id="targetTable" border="1" cellpadding="8">
    <thead>
      <tr>
        <th>选择</th>
        <th>内容</th>
      </tr>
    </thead>
    <tbody>
      <!-- 新增行将插入此处 -->
    </tbody>
  </table>
</div>

CSS样式 #

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}
.search-area {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
#projectSelect {
  min-width: 150px;
}
.same-row-item {
  display: inline-block;
  margin-left: 10px;
  color: #666;
}
.next-row-item {
  padding-left: 40px; /* 对齐复选框列宽度，保证视觉关联 */
}

JavaScript逻辑 #

const replaceBtn = document.getElementById('replaceBtn');
const projectSelect = document.getElementById('projectSelect');
const tableBody = document.getElementById('targetTable').querySelector('tbody');

replaceBtn.addEventListener('click', () => {
  // 获取选中的项目列表
  const selectedItems = Array.from(projectSelect.selectedOptions).map(opt => opt.textContent);
  if (selectedItems.length < 2) {
    alert('请至少选中2个项目');
    return;
  }

  // 创建主行（包含复选框 + 主内容 + 同排子项）
  const mainRow = document.createElement('tr');
  
  // 复选框单元格
  const checkboxCell = document.createElement('td');
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkboxCell.appendChild(checkbox);
  mainRow.appendChild(checkboxCell);

  // 内容单元格：主内容 + 同行子项目
  const contentCell = document.createElement('td');
  contentCell.innerHTML = `
    选中行内容
    <span class="same-row-item">${selectedItems[0]}</span>
  `;
  mainRow.appendChild(contentCell);

  // 创建下一行的子项目行
  const nextRow = document.createElement('tr');
  nextRow.appendChild(document.createElement('td')); // 空单元格占位
  
  const nextContentCell = document.createElement('td');
  nextContentCell.classList.add('next-row-item');
  nextContentCell.textContent = selectedItems[1];
  nextRow.appendChild(nextContentCell);

  // 子行点击同步复选框状态
  nextRow.addEventListener('click', () => {
    checkbox.checked = !checkbox.checked;
  });

  // 插入到表格
  tableBody.appendChild(mainRow);
  tableBody.appendChild(nextRow);

  // 清空选择器的选中状态
  projectSelect.selectedIndex = -1;
});

关键实现细节 #

• 用multiple属性的下拉框实现多选，可根据需求替换为带搜索的下拉组件（如Select2），核心是获取选中项数组
• 同排子项通过inline-block样式实现与主内容同行显示
• 下一行通过空单元格占位，配合左内边距实现与主行复选框关联的视觉效果
• 子行绑定点击事件，同步主行复选框的选中状态，保证交互一致性

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