Question

如何禁用点击某些单元格？另外，有没有办法禁用特定列中的单元格？

我有通过formatter生成的按钮，其初始状态被禁用。但是当单击禁用按钮（包含在网格单元格中）时，将调用onSelectCell。我不希望这种情况发生。我希望按钮独立于单元格。

我在名为ActionIcons的列中生成了一个按钮：

var qccolmodel = function() {
        var colModel = [      
                            {name:'Name',                   index:'Name',           formatter:qcDetailsFormatterFunction.mn},
                            {name:'ReelIndex',              index:'ReelIndex',      width:28,   align:"center", formatter:qcDetailsFormatterFunction.ri},
                            {name:'FileName',               index:'FileName',       width:120,  align:"left", formatter:qcDetailsFormatterFunction.fn},
                            {name:'MediaType',              index:'MediaType',      width:70,   align:"center",formatter:qcDetailsFormatterFunction.mt},
                            {name:'QCStatus',               index:'QCStatus',       width:35,   align:"center", editable:true, edittype:'select', editoptions:{value:"OK:Ok;ND:NotDone;FD:Failed"},formatter:qcDetailsFormatterFunction.qs},
                            {name:'QCComments',             index:'QCComments',     width:75,   align:"center", editable:true, formatter:qcDetailsFormatterFunction.qcm},
                            {name:'PackagingStatus',        index:'PackagingStatus',width:53,   align:"center", editable:true, edittype:'select', editoptions:{value:"ADDED:Add To Package;NOT ADDED:Remove From Package"}, resizable:false, formatter:qcDetailsFormatterFunction.ps},
                            //{name: 'ActionIcons',         index:'ActionIcons',    fixed:true, sortable:false, resize:false, formatoptions:{keys:true,delbutton : false}, formatter:'actions'},
                            {name: 'ActionIcons',           index:'ActionIcons',    width:12, align:"center" , formatter:qcDetailsFormatterFunction.ai},
                            {name:'JobID',                  index:'JobID',          width:0,    hidden:true,    resizable:false,    formatter:qcDetailsFormatterFunction.id}

                       ];
        return colModel;
    };

    var qcDetailsFormatterFunction = new Object();

    function defineQCDetailsFormatterFunction() {

        qcDetailsFormatterFunction.mn = function(val,colModelOB, rowdata) {
            var innerHTML = '<span class="qc-movie-name" id="qc_' + val + '">' + val + '</span>';

            return innerHTML;
        }

        qcDetailsFormatterFunction.ri = function(val,colModelOB, rowdata) {
            var innerHTML = "<span class='qc-reel-index'>" + val + "</span>";
            return innerHTML;
        }

        qcDetailsFormatterFunction.fn = function(val,colModelOB, rowdata) {
            var innerHTML = "<span class='qc-filename'>" + val + "</span>";
            return innerHTML;
        }

        qcDetailsFormatterFunction.mt = function(val,colModelOB, rowdata) {
            var innerHTML = "<span class='qc-media-type'>" + val + "</span>";
            return innerHTML;
        }

        qcDetailsFormatterFunction.ps = function(val,colModelOB, rowdata) {
            if(!val || val == 'NOT ADDED') {
                return 'Not Added';
            } else{
                return 'Added To Package';
            }
        }

        qcDetailsFormatterFunction.id = function(val,colModelOB, rowdata) {
            var innerHTML = "<input id='qcid_" + val + "' type='radio' name='qc-jid' value='" + val + "' />";
            return innerHTML;
        }

        qcDetailsFormatterFunction.qs = function(val,colModelOB, rowdata) {
            if(!val) {
                return '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>';
            } else{
                return val;
            }
        }

        qcDetailsFormatterFunction.qcm = function(val,colModelOB, rowdata) {
            if(!val.trim()) {
                return '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>';
            } else{
                return val;
            }
        }

        qcDetailsFormatterFunction.ai = function(val,colModelOB, rowdata) {
            var innerHTML = '<button class="btn btn-default btn-sm save-cell" disabled data-placement="left" title="save cell">' + 
                                '<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>' +
                            '</button>';
            return innerHTML;
        }


        qcDetailsFormatterFunction.gridComplete =   function(){
            var Table           =   $(this);
            GRID_UNIQUE_ID  =   QC_GRID_UNIQUE_ID;
            if(ResizeQC ==  0){
                CommonGridCompleteFunctions(Table);
                addQCDetailsPagerIcons();
                edRefreshTimerID = setGridRefreshTimer(QC_GRID_UNIQUE_ID);

                $('.save-cell').click(function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    if(ciRow && ciCol) {
                        $('#QCStatus').saveCell(ciRow,ciCol);
                    }       
                    $('#QCStatus').removeClass('edit-grid-state');
                    if(edRefreshTimerID == -1) {
                        edRefreshTimerID = setGridRefreshTimer('QCStatus');
                    }
                });
                ResizeQC++;
            }   
            worksOnAllGridComplete(Table);
            //$('.save-cell').tooltip();
        };

    }

    defineQCDetailsFormatterFunction();

    function addQCDetailsPagerIcons() {
        $('#QCStatus').navGrid('#gridpager_QCStatus',
                {refresh:true,refreshicon:'ui-icon-refresh',refreshtitle:'Refresh',
                 position:'left',
                 search:false,
                 add:false,
                 del:false,
                 edit:false
                })
            .navButtonAdd('#gridpager_QCStatus', {
                caption: '',
                title: 'Save Cell',
                buttonicon: 'ui-icon-disk',
                onClickButton: function(event) {
                    $('#QCStatus').saveCell(ciRow,ciCol); /* ciRow and ciCol are set in createjqgrid.js */
                    $('#QCStatus').removeClass('edit-grid-state');
                    if(edRefreshTimerID == -1) {
                        edRefreshTimerID = setGridRefreshTimer('QCStatus');
                    }
                },
                position:"last"
            });
    }

Answer 1

但是当单击禁用按钮（包含在网格单元格中）时，会调用onSelectCell

由于动态按钮已呈现，因此您需要将事件委托给最近的静态父级，在您的情况下是table：

$('#QCStatus').on('click', 'button:disabled', function(e){
   return false; // does -> both -> e.preventDefault(); e.stopPropagation();
});

有没有办法在单击按钮时停止onSelectCell或禁用单击某些单元格？

1 个答案: