Bootstrap 3筛选表格：实现多选下拉框及文本截断适配需求

嘿，我来帮你搞定这两个需求！基于 Bootstrap 3，咱们一步步来实现你要的表格表头多选筛选功能：

a) 实现带多选功能的下拉框 #

Bootstrap 3 原生的 dropdown 组件不支持多选，咱们可以基于它扩展一个自定义的多选下拉框——核心思路是用 dropdown 容器包裹复选框列表，再通过 JavaScript 同步选中项到触发按钮上。

核心代码示例 #

<!-- 表格表头部分 -->
<table class="table table-bordered">
  <thead>
    <tr>
      <th>
        <!-- 多选下拉触发按钮 -->
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle form-control" type="button" id="filterDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span id="selectedItems">选择筛选项</span>
            <span class="caret"></span>
          </button>
          <!-- 多选下拉菜单 -->
          <ul class="dropdown-menu" aria-labelledby="filterDropdown">
            <li class="dropdown-header">筛选条件</li>
            <li>
              <label class="checkbox-inline">
                <input type="checkbox" value="option1"> 选项一（超长文本示例，测试截断效果）
              </label>
            </li>
            <li>
              <label class="checkbox-inline">
                <input type="checkbox" value="option2"> 选项二
              </label>
            </li>
            <li>
              <label class="checkbox-inline">
                <input type="checkbox" value="option3"> 选项三
              </label>
            </li>
            <!-- 可选：全选/取消全选 -->
            <li class="divider"></li>
            <li>
              <label class="checkbox-inline">
                <input type="checkbox" id="selectAll"> 全选
              </label>
            </li>
          </ul>
        </div>
      </th>
      <th>其他列1</th>
      <th>其他列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据行1</td>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>数据行2</td>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </tbody>
</table>

然后添加 JavaScript 处理选中逻辑：

// 监听复选框变化，更新选中项文本
$('.dropdown-menu input[type="checkbox"]').on('change', function() {
  var selected = [];
  $('.dropdown-menu input[type="checkbox"]:checked:not(#selectAll)').each(function() {
    selected.push($(this).parent().text().trim());
  });
  
  // 更新触发按钮的显示文本
  if (selected.length > 0) {
    $('#selectedItems').text(selected.join(', '));
  } else {
    $('#selectedItems').text('选择筛选项');
  }
  
  // 同步全选框状态
  var allChecked = $('.dropdown-menu input[type="checkbox"]:not(#selectAll)').length === selected.length;
  $('#selectAll').prop('checked', allChecked);
});

// 全选/取消全选逻辑
$('#selectAll').on('change', function() {
  var isChecked = $(this).prop('checked');
  $('.dropdown-menu input[type="checkbox"]:not(#selectAll)').prop('checked', isChecked).trigger('change');
});

b) 实现多选选择器文本截断+尺寸适配表格行 #

要让多选触发按钮的尺寸由表格其他行决定，同时文本超出时自动截断，咱们需要添加自定义 CSS 来控制样式：

/* 让下拉触发按钮适配表格列宽度，高度和表格行一致 */
.dropdown .form-control {
  width: 100%;
  height: auto;
  padding: 6px 12px; /* 和Bootstrap表格单元格内边距保持一致 */
  border: none;
  box-shadow: none;
}

/* 处理选中项文本的截断 */
#selectedItems {
  display: inline-block;
  max-width: calc(100% - 25px); /* 给下拉箭头留出空间 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* 确保下拉菜单不会超出表格范围（可选优化） */
.dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
}

关键说明 #

• 用 width: 100% 让触发按钮填满表头单元格，高度继承表格行的高度，保证和其他行尺寸一致；
• 通过 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 实现文本超出时的省略号截断；
• 给 #selectedItems 设置 max-width 是为了给下拉箭头（caret）留出足够空间，避免箭头被挤掉。

这样就能同时满足你的两个需求啦，你可以根据自己的实际表格结构调整 CSS 细节，比如内边距、最大高度这些参数~

内容的提问来源于stack exchange，提问作者M.E.