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

【问题标题】：Free jQGrid 4.8.0 - Paint The Column header based on sort/filter免费 jQGrid 4.8.0 - 根据排序/过滤器绘制列标题
【发布时间】：2015-05-13 09:34:53
【问题描述】：

我有一个能够排序/过滤栏打开的网格。

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

最终结果应该是这样的：

有没有一种很好的方法可以让我监听这些事件？寻找这些元素以改变它们的颜色的最佳方法是什么？

【问题讨论】：

我建议您接受所有您自己写的问题的答案。它将从“未回答”问题列表中删除该问题。
感谢您的“接受”。我忘了提到“接受”的答案在搜索引擎中具有更高的排名。所以“接受”的答案可以被其他用户更容易地找到并且不被接受。（搜索引擎将这些问题和答案解释为有帮助的信息，用相应的解决方案描述问题）。这是“接受”答案的主要原因。

标签： jquery jqgrid free-jqgrid

【解决方案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);

        }

【讨论】：