免费的 jQGrid 4.8.0 - Paint The Column header 基于 sort/filter

Question

我有一个能够 sort/filterbar 打开的网格。

我想更改过滤栏的颜色或仅在使用这些列时对该列进行排序 - 向用户表明这些列已被过滤。

最终结果应该是这样的：

有什么好方法可以让我监听这些事件？查找这些元素以更改其颜色的最佳方法是什么？

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

对于过滤器工具栏，在 '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);

        }

免费的 jQGrid 4.8.0 - Paint The Column header 基于 sort/filter

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

jquery

jqgrid

free-jqgrid