pointer-events: none——CSS实现禁用鼠标点击事件!巧妙解决ExtJs表格单行禁用功能!

来源:互联网 发布:java反射的作用 编辑:程序博客网 时间:2024/05/18 14:26

注:该篇更好的解决方案见:【解决方案】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;
}




0 0