删除在网格 ExtJS 4 中选择特定行的功能

2024-04-26

我必须删除在网格中选择某些行的功能。

我使用复选框模型

selModel: Ext.create( 'Ext.selection.CheckboxModel', {
    mode: 'SIMPLE'
} )

要禁用选择,我使用 beforeselect 事件

beforeselect: function ( row, model, index ) {
    if ( model.data.id == '3' ) {
        return false;
    }
}

为了隐藏复选框,我使用特定的行和 CSS 规则类

viewConfig: {
    getRowClass: function( record, index ) {
        var id = record.get('id');
        return id == '3' ? 'general-rule' : '';
    }
}

.general-rule .x-grid-row-checker {
    left: -9999px !important;
    position: relative;
}

也许这不是实现预期结果的最佳方法,但对于我的任务来说它是有效的。

然而,另一个问题又出现了:全选/取消全选网格标题中的复选框停止工作。当您第一次单击此复选框时,除了不应选择的行之外的所有行都会选择,但如果再次单击,则不会发生任何情况。显然,系统尝试重新选择所有行,因为还有未选择的行。

有更好的方法来解决问题吗?或者如何用这种方法解决问题。

唯一想到的就是 - 你需要重写全选/取消全选复选框的功能,但我不确定如何做到这一点。

预先感谢您的回答,如果我的问题不符合规则,我深表歉意。


我的任务的最终解决方案(删除通过 id 选择特定行的能力)如下:

覆盖全选 (and 全部取消选择如果需要)定义选择模型时忽略指定行的方法:

selModel: Ext.create( 'Ext.selection.CheckboxModel', {
    mode: 'SIMPLE',
    select: function(records, keepExisting, suppressEvent) {
        if (Ext.isDefined(records)) {
            this.doSelect(records, keepExisting, suppressEvent);
        }
    },
    selectAll: function( suppressEvent ) {
        var me = this,
            selections = me.store.getRange();

        for( var key in selections ) {
            if( selections[key].data.id == '3' ) {
                selections.splice( key, 1 );
                break;
            }
        }

        var i = 0,
            len = selections.length,
            selLen = me.getSelection().length;

        if( len != selLen ) {
            me.bulkChange = true;
            for (; i < len; i++) {
                me.doSelect(selections[i], true, suppressEvent);
            }
            delete me.bulkChange;

            me.maybeFireSelectionChange(me.getSelection().length !== selLen);
        }
        else {
            me.deselectAll( suppressEvent );
        }
    }
} )

Use 选择前禁用指定行选择的事件:

beforeselect: function ( row, model, index ) {
    if ( model.data.id == '3' ) {
        return false;
    }
}

对指定的行使用特殊的类和相应的 css 规则来隐藏指定的行:

viewConfig: {
    getRowClass: function( record, index ) {
        var id = record.get('id');
        return id == '3' ? 'general-rule' : '';
    }
}

.general-rule .x-grid-row-checker {
    left: -9999px !important;
    position: relative;
}

Thanks 埃文·特林博利咨询!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

删除在网格 ExtJS 4 中选择特定行的功能 的相关文章