jquery - Free jQGrid 4.8.0 - Paint The Column header based on sort/filter

Question

I'm having a grid with the ability to sort/filterbar turn on.

I would like to change the color of the filterbar or sort for that column only when these are in use - kind of giving the user an indication about the fact those column are filtered.

This is what the end result should look like:

Is there a nice way I can listen for these events and what is the best way to look for those element in order to change their colors?

Answer 1

找到了一个方法：

对于排序：在 onSortCol 中：

var theColumName =  $(this).jqGrid("getGridParam", "colModel")[iCol].name;
var theColumJsonMap = $(this).jqGrid("getGridParam", "colModel")[iCol].jsonmap;
var columnIdForPaint = 'jqgh_' + gridName + '_' + theColumName;


//Check to see if select column was removed from sorting - if it is not exist anymore:
if ( (index.indexOf(theColumJsonMap) == 0) || (index.indexOf(' ' + theColumJsonMap + ' ') > 0) ){
   $('#' + columnIdForPaint).css('background-color','#F8DE65');
   $('#' + columnIdForPaint).css('border','1px solid #000000');
} else {
   $('#' + columnIdForPaint).css('background-color','');
   $('#' + columnIdForPaint).css('border','');
}

对于 filtertoolbar，在 'beforeSearch' 回调中：

var postData = grid.jqGrid('getGridParam','postData');

        var filterHolder = jQuery.parseJSON(postData.filters);

        //First clean all the filter colors
        var theColModel = grid.jqGrid("getGridParam", "colModel");
        var columnsForPaintClean, inputIdClean, divLocationClean;
        for (i = 0; i < theColModel.length; i++) {

            inputIdClean = regexEscape('gs_' + theColModel[i].name);
            divLocationClean = $("#gview_" + gridName+ ' #' + inputIdClean).closest('div');
            divLocationClean.css('background-color','');
            divLocationClean.css('border','');

        }

        //Now look for all the filtered fields to color the columns headers:
        for (var i = 0; i < filterHolder.rules.length; i++){

            //Find the column json name         
            var columnsForPaint = getNoneJsonMapName(filterHolder.rules[i].field,grid);
            var inputId = regexEscape('gs_' + columnsForPaint);
            var divLocation = $("#gview_" + gridName+ ' #' + inputId).closest('div');
            divLocation.css('background-color','#9FD7B8');
            divLocation.css('border','1px solid #000000');
            //alert(columnsForPaint);

        }