
本文提供一套轻量、健壮的原生 javascript 表格排序解决方案,支持数字/字符串自动类型识别、点击切换升序/降序、仅对含按钮的可排序列生效,并通过 `data-dir` 属性与 css 伪元素精准控制排序图标显示,彻底规避非排序列误触发、状态记忆错乱及冗余 dom 操作等问题。
在构建数据表格交互功能时,一个常见且关键的需求是:用户点击表头即可按该列排序,同时视觉上清晰反馈当前排序方向(↑ 升序 / ↓ 降序)。但直接监听
元素容易导致非排序列(如“Image”列)意外触发逻辑;而使用全局变量(如 this.asc)则无法为每列独立维护排序状态,造成点击即重置、二次点击才切方向等体验缺陷。 以下是一套经过实践验证、结构清晰、可直接集成的专业级实现:
✅ 核心改进点
-
精准事件绑定:监听的是
|