免费jQGrid 4.8.0 - 根据排序/过滤器绘制Column标题

Question

我有一个可以打开排序/过滤条的网格。

我想更改过滤条的颜色或仅在使用过时对该列进行排序 - 这样可以向用户提供有关过滤这些列的事实的说明。

这是最终结果的样子：

我是否有一种很好的方式可以倾听这些事件以及寻找这些元素以改变颜色的最佳方法是什么？

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，在搜索之前＆＃39;回调：

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);

        }