w2uiGrid行多选禁用技巧

本文深入讲解了如何在 w2ui Grid 中优雅实现“按条件禁用特定行多选”的实用功能——当启用 multiSelect 后，通过监听 onSelect 事件并调用 event.preventDefault() 动态拦截非法选择操作，结合业务规则（如 recid 黑名单、只读状态等）精准控制每行是否可被选中，既保留了正常多选体验，又无需修改源码或引入复杂逻辑，还附带视觉反馈、全选处理和可测试性等最佳实践，是前端开发者解决真实业务中细粒度交互管控需求的即学即用方案。

本文介绍如何在 w2ui Grid 中基于业务逻辑动态禁用部分行的选择能力，同时保留其他行的正常多选功能，核心是利用 `onSelect` 事件结合 `event.preventDefault()` 精准拦截非法选择。

在使用 w2ui Grid 开启 multiSelect: true 后，所有行默认均可被选中。但实际业务中常需根据数据状态（如记录是否已锁定、是否为只读项等）限制某些行不可选。w2ui 并未提供内置的 disabledRows 配置项，但可通过监听 onSelect 事件实现灵活控制。

关键在于：在 onSelect 回调中判断当前被点击的记录是否允许选择；若不允许，则调用 event.preventDefault() 阻止默认选中行为。注意该事件会在每次点击选择列（checkbox）或按 Ctrl/Cmd + 点击行时触发，且 event.recid 可准确获取目标记录 ID。

以下为完整可运行示例：

✅ 注意事项与最佳实践：

• onSelect 是唯一可靠拦截点——不要尝试在 onClick 或 onDblClick 中处理，它们不直接控制选择状态；
• event.preventDefault() 仅阻止本次选择动作，不影响已选中的其他行，符合多选场景预期；
• 建议将禁用规则封装为纯函数（如 isRowSelectable(recid)），便于复用和单元测试；
• 若需视觉反馈（如灰显 checkbox），可配合 render 列配置或 CSS 类动态添加（例如通过 onRender 修改 DOM）；
• 注意：event.recid 在点击表头全选时为 undefined，此时若需控制全选行为，应额外判断 event.target === 'header' 并遍历 records 过滤。

通过该方案，你可在不修改 w2ui 源码的前提下，以声明式逻辑精准管控每行的选择权限，兼顾灵活性与可维护性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~