本文介绍如何在 w2ui grid 中基于数据状态动态控制行选择权限，仅允许用户选中满足条件的记录，通过 `onselect` 事件结合 `event.preventdefault()` 精准拦截非法选择操作。
在使用 w2ui Grid 并启用 multiSelect: true 时，有时需实现“部分行可选、部分行禁选”的业务逻辑（例如：只允许编辑未锁定的记录，或跳过系统自动生成的只读条目）。w2ui 本身不提供内置的 rowSelectable 配置项，但可通过监听 onSelect 事件并主动阻止默认行为来实现精细化控制。
核心思路是：在 onSelect 回调中，根据当前被点击行的 recid 或其他字段值判断是否允许选择；若不符合条件，则调用 event.preventDefault() 阻止该次选择操作，且不影响其他行的正常交互。
以下为完整可运行示例：
响应式黑色展台设计整站模板1.4.2
下载
响应式黑色展台设计整站模板，自带内核安装即用，图片文本实现可视化，方便修改，支持多种内容模型及自定义功能，可根据需要自行添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
let 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', locked: true },
{ recid: 2, field: 'neither this', locked: true },
{ recid: 3, field: 'but you can select this', locked: false },
{ recid: 4, field: 'or this', locked: false },
{ recid: 5, field: 'and what do you think about this?', locked: false },
{ recid: 6, field: 'Ok no, not this one', locked: true },
{ recid: 7, field: 'as even this must be disabled', locked: true }
],
// 关键：监听 onSelect 事件
onSelect(event) {
// 获取被点击的行数据（支持单选/多选触发）
const record = this.get(event.recid);
// 若该行标记为 locked，则禁止选择
if (record && record.locked === true) {
event.preventDefault();
}
}
});✅ 注意事项与最佳实践：
- onSelect 会在每次点击复选框或行区域（当 selectType: 'row'）时触发，event.recid 即当前操作行 ID；批量操作（如 Ctrl+Click、Shift+Click）会多次触发，每次处理单行，因此上述逻辑天然兼容多选场景。
- 建议在数据源中显式添加业务标识字段（如 locked、disabled、editable），避免硬编码 recid 判断，提升可维护性。
- 若需视觉反馈（如禁用行灰显），应配合 CSS 自定义样式（例如 .w2ui-grid .w2ui-row[disabled] { opacity: 0.6; }），但注意 w2ui 不自动添加 disabled 属性，需通过 onRender 手动注入 DOM 属性或 class。
- 切勿在 onSelect 中直接修改 this.select() 或 this.unselect()，可能引发状态冲突；拦截应仅通过 preventDefault() 完成。
通过该方案，你可在保持 w2ui 多选能力的同时，灵活赋予每行独立的选择权限，满足复杂权限控制需求。
