多列组合框

多列组合框技术解析

基础概念

多列组合框(也称为多列下拉框或多列选择框)是一种增强型的用户界面控件，它结合了下拉列表和表格的特性，允许用户从包含多列数据的下拉选项中进行选择。与传统的单列下拉框相比，多列组合框能够显示更丰富的信息，帮助用户做出更准确的选择。

优势特点

信息丰富：可以同时显示多个相关属性，减少用户误选
空间效率：在有限空间内展示更多信息
用户体验：便于比较和选择具有多个属性的项目
搜索过滤：通常支持基于多列的搜索和筛选功能

常见类型

固定列宽多列组合框：各列宽度固定
自适应多列组合框：列宽根据内容自动调整
可排序多列组合框：支持按列排序
可筛选多列组合框：支持按列筛选内容
分页多列组合框：数据量大时支持分页显示

应用场景

产品选择(显示产品名称、价格、库存等多维信息)
人员选择(显示姓名、部门、职位等信息)
地址选择(显示省、市、区等多级信息)
数据报表筛选条件设置
复杂表单中的选项选择

实现示例(HTML/JavaScript)

<!-- HTML部分 -->
<div class="multi-column-combobox">
  <input type="text" id="searchInput" placeholder="搜索...">
  <button id="toggleButton">▼</button>
  <div id="dropdownPanel" class="dropdown-panel">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>类别</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>产品A</td>
          <td>电子产品</td>
          <td>¥199</td>
        </tr>
        <tr>
          <td>002</td>
          <td>产品B</td>
          <td>家居用品</td>
          <td>¥299</td>
        </tr>
        <!-- 更多行... -->
      </tbody>
    </table>
  </div>
</div>

<!-- CSS部分 -->
<style>
.multi-column-combobox {
  position: relative;
  width: 400px;
}

.dropdown-panel {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: white;
  z-index: 1000;
}

.dropdown-panel table {
  width: 100%;
  border-collapse: collapse;
}

.dropdown-panel th, .dropdown-panel td {
  padding: 8px;
  border: 1px solid #ddd;
}

.dropdown-panel tr:hover {
  background-color: #f5f5f5;
}
</style>

<!-- JavaScript部分 -->
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
  const panel = document.getElementById('dropdownPanel');
  panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
});

document.getElementById('searchInput').addEventListener('input', function(e) {
  const searchText = e.target.value.toLowerCase();
  const rows = document.querySelectorAll('.dropdown-panel tbody tr');
  
  rows.forEach(row => {
    const rowText = row.textContent.toLowerCase();
    row.style.display = rowText.includes(searchText) ? '' : 'none';
  });
});
</script>