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。

以下为完整可运行示例：

<link href="https://cdn.jsdelivr.net/npm/w2ui@2.0/dist/w2ui-2.0.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/w2ui@2.0/dist/w2ui-2.0.min.js"></script>

<div id="grid" style="height: 500px;"></div>

<script>
const DISABLED_RECID_LIST = [1, 2, 6, 7]; // 明确声明禁止选择的 recid

const grid = new w2grid({
    name: 'grid',
    box: '#grid',
    multiSelect: true,
    show: {
        selectColumn: true
    },
    columns: [
        { field: 'recid', text: 'ID', size: '10px', sortable: true, attr: 'align="center"' },
        { field: 'field', text: '内容', size: '500px', sortable: true }
    ],
    records: [
        { recid: 1, field: 'You cannot select this' },
        { recid: 2, field: 'neither this' },
        { recid: 3, field: 'but you can select this' },
        { recid: 4, field: 'or this' },
        { recid: 5, field: 'and what do you think about this?' },
        { recid: 6, field: 'Ok no, not this one' },
        { recid: 7, field: 'as even this must be disabled' }
    ],
    onSelect(event) {
        // 检查当前被选中的记录是否在禁用列表中
        if (DISABLED_RECID_LIST.includes(event.recid)) {
            event.preventDefault(); // 阻止选中
            w2alert(`记录 #${event.recid} 不可选择`, '操作受限');
        }
    }
});
</script>

✅ 注意事项与最佳实践：

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

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

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