layui表格筛选：多条件查询与过滤-优快云博客

layui表格筛选：多条件查询与过滤

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为海量数据查询而烦恼？还在手动编写复杂的筛选逻辑？layui表格组件内置的强大筛选功能，助你轻松实现多条件组合查询，让数据过滤变得简单高效！

📋 文章导读

通过本文，你将掌握：

✅ layui表格基础筛选配置
✅ 多条件组合查询实现方案
✅ 服务端筛选与前端筛选的差异
✅ 自定义筛选表单的高级用法
✅ 实时搜索与动态过滤技巧

🔧 基础筛选配置

layui表格内置了列筛选功能，通过简单的配置即可启用：

<table id="demo" lay-filter="test"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/api/data',
    toolbar: true, // 开启工具栏
    defaultToolbar: ['filter', 'exports', 'print'], // 包含筛选工具
    cols: [[
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', width: 150},
      {field: 'city', title: '城市', width: 100},
      {field: 'sign', title: '签名', minWidth: 150}
    ]],
    page: true
  });
});
</script>

启用后，表格右上角会出现筛选图标，点击即可显示/隐藏各列。

🎯 多条件组合查询

前端实时筛选

对于本地数据，可以使用where参数实现多条件筛选：

// 多条件筛选示例
var filterConditions = {
  city: '北京',
  experience: {gt: 100} // 经验值大于100
};

table.reload('demo', {
  where: filterConditions
});

服务端筛选

对于大量数据，建议使用服务端筛选：

// 构建筛选条件
var buildFilterParams = function() {
  return {
    username: $('#username').val(),
    city: $('#city').val(),
    minExperience: $('#minExp').val(),
    maxExperience: $('#maxExp').val(),
    startDate: $('#startDate').val(),
    endDate: $('#endDate').val()
  };
};

// 执行筛选
$('#searchBtn').click(function(){
  table.reload('demo', {
    where: buildFilterParams(),
    page: {curr: 1} // 重置到第一页
  });
});

📊 筛选条件类型支持

layui表格支持多种筛选条件类型：

条件类型	示例	描述
精确匹配	`{city: '北京'}`	完全匹配字段值
范围查询	`{age: {gt: 18, lt: 30}}`	大于18且小于30
模糊搜索	`{name: {like: '张'}}`	包含"张"的姓名
多选条件	`{status: [1, 2, 3]}`	状态为1、2或3
空值判断	`{email: {null: true}}`	邮箱为空的记录

🎨 自定义筛选表单

高级筛选面板

创建自定义筛选表单提供更丰富的筛选体验：

<div class="layui-card">
  <div class="layui-card-header">高级筛选</div>
  <div class="layui-card-body">
    <form class="layui-form" lay-filter="searchForm">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <select name="city">
              <option value="">全部</option>
              <option value="北京">北京</option>
              <option value="上海">上海</option>
              <option value="广州">广州</option>
              <option value="深圳">深圳</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button type="button" class="layui-btn" id="searchBtn">查询</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</div>

实时搜索功能

实现输入框实时筛选：

var searchTimer;
$('#keyword').on('input', function(){
  clearTimeout(searchTimer);
  searchTimer = setTimeout(function(){
    table.reload('demo', {
      where: {keyword: $('#keyword').val()}
    });
  }, 500); // 500毫秒延迟
});

🔄 筛选状态管理

保存筛选条件

// 保存筛选条件到本地存储
function saveFilterConditions(conditions) {
  localStorage.setItem('tableFilter', JSON.stringify(conditions));
}

// 加载保存的筛选条件
function loadFilterConditions() {
  var saved = localStorage.getItem('tableFilter');
  return saved ? JSON.parse(saved) : {};
}

// 应用保存的筛选条件
function applySavedFilters() {
  var conditions = loadFilterConditions();
  Object.keys(conditions).forEach(function(key) {
    $('[name="' + key + '"]').val(conditions[key]);
  });
  table.reload('demo', {where: conditions});
}

筛选历史记录

var searchHistory = [];

function addToHistory(conditions) {
  // 避免重复记录
  var exists = searchHistory.some(function(item) {
    return JSON.stringify(item) === JSON.stringify(conditions);
  });
  
  if (!exists) {
    searchHistory.unshift(conditions);
    // 只保留最近10条记录
    if (searchHistory.length > 10) {
      searchHistory.pop();
    }
    renderHistory();
  }
}

function renderHistory() {
  var html = searchHistory.map(function(conditions, index) {
    return '<div class="history-item" data-index="' + index + '">' +
           JSON.stringify(conditions) + '</div>';
  }).join('');
  $('#searchHistory').html(html);
}

📈 性能优化建议

服务端筛选优化

// 防抖处理，避免频繁请求
var debounce = function(func, wait) {
  var timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
};

// 使用防抖的筛选函数
var debouncedSearch = debounce(function() {
  table.reload('demo', {
    where: buildFilterParams()
  });
}, 300);

前端筛选优化

对于本地数据筛选，使用Web Worker处理大量数据：

// 创建筛选Worker
var filterWorker = new Worker('filter-worker.js');

filterWorker.onmessage = function(e) {
  var filteredData = e.data;
  // 更新表格数据
  table.reload('demo', {
    data: filteredData
  });
};

// 发送筛选任务
function filterData(data, conditions) {
  filterWorker.postMessage({
    data: data,
    conditions: conditions
  });
}

🎪 实战案例：电商订单筛选系统

复杂筛选条件组合

// 订单状态筛选映射
var statusMap = {
  'all': '',
  'pending': 1,
  'paid': 2,
  'shipped': 3,
  'completed': 4,
  'cancelled': 5
};

// 价格区间筛选
function filterByPriceRange(data, min, max) {
  return data.filter(function(item) {
    var price = parseFloat(item.price);
    return (!min || price >= min) && (!max || price <= max);
  });
}

// 多条件组合筛选
function applyMultipleFilters(data, filters) {
  return data.filter(function(item) {
    return Object.keys(filters).every(function(key) {
      var value = filters[key];
      if (!value) return true;
      
      switch(key) {
        case 'priceRange':
          var price = parseFloat(item.price);
          return price >= value.min && price <= value.max;
        case 'createTime':
          return new Date(item.createTime) >= new Date(value.start) && 
                 new Date(item.createTime) <= new Date(value.end);
        case 'status':
          return statusMap[value] ? item.status == statusMap[value] : true;
        default:
          return item[key] == value;
      }
    });
  });
}

筛选结果统计

// 筛选结果统计
function getFilterStats(filteredData) {
  var stats = {
    total: filteredData.length,
    totalAmount: filteredData.reduce(function(sum, item) {
      return sum + parseFloat(item.amount);
    }, 0),
    avgAmount: 0
  };
  
  if (stats.total > 0) {
    stats.avgAmount = stats.totalAmount / stats.total;
  }
  
  return stats;
}

// 更新统计信息
function updateStats(stats) {
  $('#totalCount').text(stats.total);
  $('#totalAmount').text(stats.totalAmount.toFixed(2));
  $('#avgAmount').text(stats.avgAmount.toFixed(2));
}

📋 筛选功能对比表

筛选方式	适用场景	优点	缺点
前端筛选	数据量小(<1000条)	响应快，无需网络请求	大数据量性能差
服务端筛选	大数据量	性能好，支持复杂查询	需要网络请求
混合筛选	中等数据量	平衡性能和体验	实现复杂度高

🔧 常见问题解决

筛选性能优化

// 建立数据索引
function createDataIndex(data, key) {
  var index = {};
  data.forEach(function(item, i) {
    var value = item[key];
    if (!index[value]) {
      index[value] = [];
    }
    index[value].push(i);
  });
  return index;
}

// 使用索引快速筛选
function quickFilterByIndex(data, index, value) {
  var indices = index[value];
  return indices ? indices.map(function(i) { return data[i]; }) : [];
}

内存管理

// 分页加载大数据量
function loadDataInChunks(url, pageSize, callback) {
  var currentPage = 1;
  var allData = [];
  
  function loadNextPage() {
    $.get(url, {page: currentPage, limit: pageSize}, function(res) {
      allData = allData.concat(res.data);
      
      if (res.data.length === pageSize) {
        currentPage++;
        loadNextPage();
      } else {
        callback(allData);
      }
    });
  }
  
  loadNextPage();
}

🚀 总结与最佳实践

layui表格筛选功能强大而灵活，通过合理的配置和优化，可以满足各种复杂的业务需求。关键要点：

根据数据量选择筛选方式：小数据用前端筛选，大数据用服务端筛选
合理使用缓存：对频繁使用的筛选结果进行缓存
性能优化：使用防抖、索引、Web Worker等技术提升性能
用户体验：提供实时反馈、历史记录、状态保存等功能

通过本文的介绍，相信你已经掌握了layui表格多条件筛选的精髓，快去实践中体验这些强大的功能吧！

温馨提示：记得根据实际业务需求调整筛选策略，在性能和用户体验之间找到最佳平衡点。如有任何问题，欢迎在评论区交流讨论！

📌 下期预告：《layui表格编辑功能全解析：从基础到高级实战》

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考