
本文介绍如何在 w2ui grid 中基于业务逻辑动态禁用部分行的选择功能,同时保留其他行的正常多选能力,核心是通过 `onselect` 事件结合 `event.preventdefault()` 实现精细化控制。
w2ui Grid 默认支持全局多选(multiSelect: true),但不直接提供“按行启用/禁用选择”的配置项。要实现仅允许特定记录被选中(例如根据数据状态、权限或业务规则屏蔽某些行),需借助其事件机制进行干预。
关键在于监听 onSelect 事件——该事件在用户点击复选框或按住 Ctrl/Shift 点击行时触发,且在实际选中逻辑执行前发生。此时可通过 event.preventDefault() 阻止默认行为,从而实现条件化拦截。
以下为完整可运行示例,其中 recid 为 1、2、6、7 的记录被禁止选择,其余可正常选中:
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', disabled: true },
{ recid: 2, field: 'neither this', disabled: true },
{ 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', disabled: true },
{ recid: 7, field: 'as even this must be disabled', disabled: true }
],
// 核心:在 onSelect 中判断并阻止
onSelect(event) {
const record = this.get(event.recid);
if (record && record.disabled === true) {
event.preventDefault();
console.warn(`Selection blocked for record #${event.recid}`);
}
}
});✅ 注意事项: event.preventDefault() 必须在 onSelect 回调内调用,且需在判断逻辑为真时立即执行; 推荐在数据源中显式标记禁用状态(如 disabled: true 字段),便于统一维护和扩展; 若需视觉反馈(如灰化复选框),可配合 render 或 onRender 自定义单元格样式,但注意 w2ui 不原生支持禁用复选框 UI,需额外 CSS 辅助; 此方案兼容键盘操作(空格键切换选择)与鼠标点击,具有全场景一致性。
通过该方式,你无需修改 w2ui 源码或重写选择逻辑,即可在保持框架标准行为的前提下,灵活实现基于数据驱动的选择权限控制,适用于审核列表、只读行标识、权限隔离等典型业务场景。










