如何为Bootstrap Table实现多标签筛选及AND/OR逻辑切换

核心实现思路 #

• 隐藏标签列：通过表格列配置的visible: false属性实现，保留数据用于筛选但不显示在页面
• 自定义多选标签控件：用Bootstrap Dropdown搭配复选框构建，避开原生filter-control的功能局限
• 切换筛选逻辑：通过按钮切换OR/AND规则，分别用数组的some()/every()方法实现匹配判断
• 手动触发筛选：利用Bootstrap Table的filterBy方法应用自定义筛选规则

HTML 结构 #

<!-- 筛选工具栏 -->
<div class="d-flex align-items-center mb-3">
  <!-- 标签筛选下拉菜单 -->
  <div class="dropdown me-3">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      选择标签
    </button>
    <ul class="dropdown-menu p-2" style="max-height: 200px; overflow-y: auto;">
      <div id="tag-checkboxes" class="checkbox-group">
        <!-- 复选框将通过JS动态生成 -->
      </div>
      <hr class="dropdown-divider">
      <div class="d-flex justify-content-around">
        <button type="button" class="btn btn-sm btn-outline-primary active" id="filter-or">OR</button>
        <button type="button" class="btn btn-sm btn-outline-primary" id="filter-and">AND</button>
      </div>
    </ul>
  </div>
  <!-- 自定义全局搜索框 -->
  <input type="text" class="form-control" id="table-search" placeholder="搜索..." style="width: 200px;">
</div>

<!-- Bootstrap Table容器 -->
<table id="data-table" class="table table-striped"></table>

JavaScript 代码 #

// 模拟从JSON文件读取的数据（实际项目中替换为AJAX请求）
const tableData = [
  { id: 1, name: "项目A", tags: ["前端", "Vue"] },
  { id: 2, name: "项目B", tags: ["后端", "Java", "MySQL"] },
  { id: 3, name: "项目C", tags: ["前端", "React", "TypeScript"] },
  { id: 4, name: "项目D", tags: ["DevOps", "Docker"] },
  { id: 5, name: "项目E", tags: ["前端", "Java"] }
];

$(function() {
  // 提取所有唯一标签，避免重复选项
  const allTags = [...new Set(tableData.flatMap(item => item.tags))];
  
  // 动态生成标签复选框
  const checkboxContainer = $('#tag-checkboxes');
  allTags.forEach(tag => {
    checkboxContainer.append(`
      <div class="form-check">
        <input class="form-check-input tag-checkbox" type="checkbox" value="${tag}" id="tag-${tag}">
        <label class="form-check-label" for="tag-${tag}">${tag}</label>
      </div>
    `);
  });

  // 初始化Bootstrap Table
  $('#data-table').bootstrapTable({
    data: tableData,
    columns: [
      { field: 'id', title: 'ID' },
      { field: 'name', title: '项目名称' },
      { field: 'tags', title: '标签', visible: false } // 隐藏标签列
    ],
    search: true,
    searchSelector: '#table-search' // 指定自定义搜索框
  });

  // 默认筛选逻辑为OR
  let filterLogic = 'OR';

  // 逻辑切换按钮事件
  $('#filter-or, #filter-and').on('click', function() {
    $('#filter-or, #filter-and').removeClass('active');
    $(this).addClass('active');
    filterLogic = $(this).attr('id').replace('filter-', '');
    applyTagFilter(); // 切换后立即重新筛选
  });

  // 复选框状态变化事件
  $('.tag-checkbox').on('change', applyTagFilter);

  // 核心筛选函数
  function applyTagFilter() {
    const selectedTags = $('.tag-checkbox:checked').map((_, el) => el.value).get();
    
    if (selectedTags.length === 0) {
      // 无选中标签时清除筛选
      $('#data-table').bootstrapTable('filterBy', {});
      return;
    }

    // 根据逻辑生成筛选规则
    let filterFunc;
    if (filterLogic === 'OR') {
      // OR逻辑：只要包含任一选中标签就显示
      filterFunc = item => selectedTags.some(tag => item.tags.includes(tag));
    } else {
      // AND逻辑：必须包含所有选中标签才显示
      filterFunc = item => selectedTags.every(tag => item.tags.includes(tag));
    }

    // 应用筛选
    $('#data-table').bootstrapTable('filterBy', {
      tags: filterFunc
    });
  }
});

关键说明 #

• 标签列隐藏后仍会保留数据，不影响筛选逻辑
• 动态生成复选框可以自动适配数据源中的标签变化，不用手动维护选项
• OR/AND逻辑切换通过数组的some()和every()方法实现，逻辑清晰且性能稳定
• 自定义搜索框和标签筛选可以同时生效，Bootstrap Table会自动叠加筛选条件

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