pointer-events: none——CSS实现禁用鼠标点击事件!巧妙解决ExtJs表格单行禁用功能!...
注:该篇更好的解决方案见:【解决方案】Ext.grid.CheckboxSelectionModel 实现锁住指定行不被选中
需求如下:
实现效果如下:
注:深灰色的背景色丑是丑了点,但是也正是这样才让前面的勾选框看上去不存在,实际上这个checkbox还是存在的,只是颜色正好被覆盖了。
实现方法如下:
js中,对表格的 viewConfig 属性进行 getRowClass 判断设置:
viewConfig: {
forceFit: false,
getRowClass:function(record,index,rowParams,store){
if (record.data.status == "startCatalog") {
return "getRowClassLock";
}
}
},
css中,对返回的样式进行设置,此处就完美地应用 pointer-events: none实现鼠标点击无效的功能!
.getRowClassLock {
background-color: #999;
pointer-events: none;
}