多条件联合筛选查询分前端实时过滤与后端驱动两种方式：小数据（≤1000行）可JS遍历DOM匹配非空条件并显隐行；大数据须后端接收参数、校验后构造安全SQL查询，配合分页与权限控制。
多条件联合筛选查询的核心是把多个输入项的值组合成一个过滤逻辑，前端实时匹配数据，或提交给后端执行 SQL 查询。实现方式取决于数据量大小和业务场景——小数据可前端过滤，大数据建议后端分页+条件拼接。
前端 JS 实现多条件实时过滤（适合静态表格）
适用于表格行数较少（如 ≤ 1000 行），所有数据已加载到页面中。用 JavaScript 遍历 <tbody> 的每一行，检查是否同时满足所有非空条件。
<ul>
<li>为每个筛选字段（如姓名、部门、状态）设置 <code>input 或 select，并添加统一监听（如 input 或 change 事件）
<tr>，提取对应列的文本（或 <code>data-* 属性值），逐一比对
tr.style.display = 'none'；全部匹配则设为 '' 或 'table-row'
示例关键逻辑：
<script><br> function filterTable() {<br> const nameVal = document.getElementById('filter-name').value.trim();<br> const deptVal = document.getElementById('filter-dept').value;<br> const rows = document.querySelectorAll('#my-table tbody tr');<br> rows.forEach(row => {<br> const nameCell = row.cells[0].textContent;<br> const deptCell = row.cells[1].dataset.dept;<br> const show = (!nameVal || nameCell.includes(nameVal))<br> && (!deptVal || deptCell === deptVal);<br> row.style.display = show ? '' : 'none';<br> });<br> }<br> document.getElementById('filter-name').addEventListener('input', filterTable);<br> document.getElementById('filter-dept').addEventListener('change', filterTable);<br> </script>
后端驱动的多条件查询（推荐用于真实业务）
当数据来自数据库、需分页、含权限或涉及关联表时，必须由后端接收参数并构造查询。前端只需收集条件、发送请求，后端负责安全校验与 SQL 拼接。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 表单使用
<form method="get"></form>或 JS 发起fetch请求（推荐 GET，便于书签和刷新） - URL 示例：
/api/users?name=张&dept=tech&status=active - 后端（如 Node.js/Express）解析 query 参数，对每个字段做白名单校验（防 SQL 注入）
- 动态构建 WHERE 子句：只加入非空且合法的字段，用参数化查询（如
WHERE name LIKE ? AND dept = ?）
注意：不要拼接原始字符串生成 SQL；避免 WHERE 1=1 这类写法，应逻辑清晰地累积条件。
增强体验的小技巧
- 添加「重置」按钮，一键清空所有筛选项并重新加载原始数据（前端可存初始 DOM 片段，后端可跳转无参 URL）
- 搜索框支持回车触发，下拉选择支持键盘导航
- 显示当前生效的筛选标签（如「部门：技术部｜状态：启用」），点击可单独清除某条件
- 防抖处理输入事件（尤其姓名模糊搜），避免频繁执行过滤逻辑
常见陷阱提醒
- 日期范围筛选未做大小判断（开始时间 > 结束时间），导致无结果——需前端校验或后端自动规整
- 中文模糊搜索用
includes()区分大小写或全半角——建议统一转小写再比对 - 多选下拉（如「所属项目」）未正确取数组值，导致只传了第一个选项
- 空字符串
''和null/undefined在判断时行为不一致，建议统一用!val或String(val).trim() === ''
