Javascript 删除在网格extjs4中选择特定行的功能

我必须取消在网格中选择某些行的功能

我使用CheckboxModel

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;
}

也许这不是达到预期结果的最佳方法，但对于我的任务来说，它是有效的

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

有没有更好的办法来解决这个问题？或者如何用这种方法解决问题

我想到的唯一一件事是，您需要重写Select All/Unselect All functions for复选框，但我不确定如何才能做到这一点

---

提前感谢您的回答，如果我提出的问题不符合规则，我深表歉意。

目前没有内置挂钩来支持此类功能。标题复选框调用

selectAll

和

deselectAll

，因此您需要覆盖这些方法，以防止在每个记录的基础上执行此操作。

我的任务的最终解决方案（取消按id选择特定行的功能）如下所示：

当您定义选择模型以忽略指定行时，覆盖selectAll（和unselectAll（如果需要）方法：

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 );
        }
    }
} )

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

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;
}

为指定行使用特殊类，并使用相应的css规则隐藏指定行：

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 );
        }
    }
} )

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

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;
}

感谢Evan Trimboli的建议