最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Remove ability to select specific rows in grid ExtJS 4 - Stack Overflow

programmeradmin7浏览0评论

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

I use CheckboxModel

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

To disable selection I use beforeselect event

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

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 All checkbox 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.

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

The only thing that es to mind - you need to rewrite the Select All / Unselect All functions 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.

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

I use CheckboxModel

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

To disable selection I use beforeselect event

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

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 All checkbox 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.

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

The only thing that es to mind - you need to rewrite the Select All / Unselect All functions 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.

Share Improve this question edited May 8, 2015 at 15:24 Sergey Novikov asked Aug 9, 2013 at 8:13 Sergey NovikovSergey Novikov 4,1967 gold badges34 silver badges60 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

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

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

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

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:

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 Trimboli for advice!

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

发布评论

评论列表(0)

  1. 暂无评论