Layui 表格需手动实现多字段排序：拦截 sort 事件维护 sortList 数组，用 table.reload() 传结构化 where.sort 参数，前端 templet 动态渲染排序标识，后端校验白名单防注入。
点击表头时如何触发多字段排序逻辑
layui 的 table 默认只支持单字段升序/降序切换，不原生支持 ctrl+click 或 shift+click 追加排序条件。要实现“点击 a 字段 → 按 a 升序；再按住 ctrl 点击 b 字段 → 变成 a 升序 + b 降序”这类组合排序，必须拦截 table.on('sort') 事件并自行维护一个排序队列。
关键点在于：不要依赖 data.sort 自动重载，而是用 table.reload() 手动传入 initSort 和自定义 where 参数。Layui 不会自动合并多次 sort 事件，得自己存状态。
- 监听
table.on('sort', 'demo')，每次触发都把当前字段和类型（asc/desc）推入数组sortList - 若用户 Ctrl+Click 同一字段，应切换其方向；若点击不同字段，则追加（不是覆盖）
- 用
event.preventDefault()阻止默认排序行为，避免 table 自行 reload 干扰逻辑 -
sortList最好限制长度（如最多 3 个字段），否则后端解析和前端展示都容易失控
如何把多字段排序参数传给后端并保持语义清晰
Layui 的 table.reload() 的 where 参数是平铺对象，直接塞多个 sortField 和 sortType 会冲突。推荐用结构化方式传递，比如：where: { sort: [{field: 'age', type: 'desc'}, {field: 'name', type: 'asc'}] }。
后端解析时需注意字段名是否被转义、是否允许空格或特殊字符。Layui 不处理 JSON 序列化，所以 JSON.stringify 必须由你手动做，并确保后端能正确反序列化。
- 前端发送前对
sortList做JSON.stringify，赋给where.sortJson（避免 key 冲突） - 后端接收
sortJson字符串，用JSON.parse解析为数组，再逐个校验field是否在白名单内（防 SQL 注入） - 别用
where.sort直接传数组——某些后端框架（如 Spring Boot）会把数组转成逗号分隔字符串，丢失顺序和方向信息 - 如果后端只接受扁平参数（如
sort_field_1=age&sort_type_1=desc&sort_field_2=name），那就用循环拼接键名，而非硬编码下标
前端渲染时如何显示当前多字段排序状态
Layui 表头的排序图标（↑↓）只响应单字段，无法直观表示“A 升序、B 降序、C 升序”的叠加态。必须自己在列标题里插入额外标识，比如小数字角标或颜色区分。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
最稳妥的做法是：在 cols 配置中使用 templet 函数动态渲染表头文字，并根据当前 sortList 数组位置添加视觉提示。
- 给每列加一个唯一
data-field属性，在templet中查sortList.findIndex(i => i.field === this.field)得到序号 - 序号 ≥ 0 时，在列名后加
<span style="font-size:12px;color:#999">#{index+1}</span>，升序用绿色 ↑，降序用红色 ↓ - 避免用 Tooltip 显示全部排序字段——鼠标悬停延迟明显，且移动端无 hover
- 清空排序需提供显式按钮（如“重置排序”），不能只靠双击表头——Layui 双击默认是恢复默认排序，不是清空多字段队列
服务端排序与前端排序混用时的常见陷阱
如果数据量小（Array.sort() 实现多字段排序，省去请求。这看似快，但极易出错：Layui 分页依赖后端返回的 count 和 data，前端排序后若不重新计算分页，第 2 页可能全是重复数据或漏掉条目。
更隐蔽的问题是：前端排序无法处理 null/undefined、中文拼音、大小写混合等场景，而数据库的 ORDER BY 有 collation 和函数支持（如 ORDER BY UPPER(name), age DESC）。
- 除非明确关闭分页（
page: false）且数据完全静态，否则不要在前端做最终排序 - 如果真要用前端排序，必须配合
table.cache['demo']获取全量原始数据，再用稳定排序算法（如Intl.Collator处理中文）重排，最后用table.render({ data: sortedData })替换 - 后端排序字段名和前端列
field不一致时（如后端用user_name，前端列设为name），必须在sortList中做映射转换，不能直接透传
多字段排序真正麻烦的不是代码量，而是字段优先级、空值排前面还是后面、中文排序规则这些细节——它们往往要跟产品、后端一条条对齐，而不是写完 JS 就完事。
