【解决方案】Ext.grid.CheckboxSelectionModel 实现锁住指定行不被选中

2016-12-31 08:26:24来源:CSDN作者:fifteen718人点击

第七城市

效果图1:


注:如图,要对 sm 为 CheckboxSelectionModel 类型的 grid 实现指定行锁住而不被选中,锁住的条件由该行的某一字段的数据决定,图中根据“状态”决定改行能否被选中。


实现方法(js中对这个 grid 的 sm 属性做配置):

sm:new Ext.grid.CheckboxSelectionModel({
            checkOnly:true,
            listeners:{
                beforerowselect:function(sm,rowIndex,keepExisting,record){
                    if (record.data.status == "startCatalog"){
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }),


注:其实就是在选中一行数据之前进行监听,那么监听的这个事件就是伟大的神奇的 beforerowselect 

具体介绍如下图(api截图):





---------------------------------------------------------------------  我是分割线  --------------------------------------------------------------------- 


接下来,我们对页面视觉效果做些优化。

效果图2:



注:如图,(要对 sm 为 CheckboxSelectionModel 类型的 grid 实现指定行锁住而不被选中,锁住的条件由该行的某一字段的数据决定,图中根据“状态”决定改行能否被选中。)锁住的行样式改变,并且 checkbox 消失。对了!屏蔽该行的一切点击事件。


实现方法(js中对这个 grid 的 viewConfig 属性做配置):

viewConfig: {
forceFit: false,
getRowClass:function(record,index,rowParams,store){
                if (record.data.status == "startCatalog") {
                    return "getRowClassLock";
                }
}
},


(css 中 getRowClassLock ):

.getRowClassLock {
    background-color: #f0f0f0;
    pointer-events: none;
    padding-left: 20px;
    color: #999;
}

.getRowClassLock .x-grid3-td-checker {
    display: none;
}


注:1、其实就是实现对表格指定行添加一个样式,那么这个的实现只需要用表格的 viewConfig这个属性进行操作即可,具体的操作方法可见api(下方截图)。

2、然后就是这个样式类(getRowClassLock)的实现,关键用到: pointer-events: none; 屏蔽鼠标点击事件 (详见 pointer-events: none——CSS实现禁用鼠标点击事件!巧妙解决ExtJs表格单行禁用功能!);然后就是对该类下面的 checkbox 进行 display: none;  隐藏对象。







第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台