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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18142583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 10:51:58  来源:igfitidea点击:

Remove ability to select specific rows in grid ExtJS 4

javascriptextjs

提问by Sergey Novikov

I have to remove ability to select some rows in my grid.

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

I use CheckboxModel

我使用 CheckboxModel

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

To disable selection I use beforeselect event

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

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

And to hide checkbox I use specific class for row and css rule

为了隐藏复选框,我对行和 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;
}

Perhaps this is not the best way to achieve the desired result, but for my task it works.

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

However, another problem appear: Select All / Unselect Allcheckbox in grid header stops working. When you first click on this ckechbox all lines except those that should not be selected will select, but if you click again, nothing happens. Obviously, the system tries to re-select all rows, as there are unselected.

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

Is there a better way to solve the problem? Or how to solve a problem with this method.

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

The only thing that comes to mind - you need to rewrite the Select All / Unselect Allfunctions for checkbox, but I not sure how I can do it.

唯一想到的 - 您需要重写复选框的全选/取消全选功能,但我不知道我该怎么做。

Thanks in advance for your answers and I apologize if I made my question is not according to the rules.

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

采纳答案by Sergey Novikov

The final solution for my task (remove the ability to choose a specific row by its id) is as follows:

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

Override selectAll(and unselectAllif needed) method when you define selection model to ignore spicified rows:

当您定义选择模型以忽略特定行时,覆盖selectAll(如果需要,则取消选择全部)方法:

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 beforeselectevent to disable selection for specified rows:

使用beforeselect事件禁用指定行的选择:

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

Use a special class for the specified rows and the corresponding css rule to hide specified rows:

为指定的行使用一个特殊的类和相应的 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 Evan Trimbolifor advice!

感谢Evan Trimboli的建议!

回答by Evan Trimboli

There's currently no hooks built in to allow such functionality. The header checkbox calls selectAlland deselectAll, so you would need to override those methods to prevent it on a per record basis.

目前没有内置的钩子来允许这样的功能。标题复选框调用selectAlldeselectAll,因此您需要覆盖这些方法以在每个记录的基础上防止它。