Question

我改变了gridComplete: function(){中某些单元格的颜色。这会覆盖悬停或选定的颜色。我想让悬停和选定的颜色达到最高水平。即如果我选择了彩色行，它将变为所选颜色。

Answer 1

我想你的问题会继续your previous question关于某些细胞的颜色。我创建了another demo，其代码的长度为my previous example，从my answer到您之前的问题。

设置单元格颜色（<td>元素）的主要问题是单元格类当然具有更高的优先级作为行类，因为行类的定义不是“使用！important“属性。因此，为了能够使所选择的悬停细胞与其他标准细胞完全一样，必须去除改变其颜色的细胞类。在“取消选择”或“取消悬停”相应的行之后，应该恢复删除的单元类（'ui-state-error ui-state-error-text'类）。我使用以下代码实现了此行为：

var grid = $("#list");
var saveErrorStateInData = function(ptr) {
    var redCells = $("td.ui-state-error",ptr);
    if (redCells.length > 0) {
        var errorCells=[];
        $.each(redCells,function(index, value) {
            errorCells.push(value);
            $(value).removeClass("ui-state-error ui-state-error-text");
        });
        $(ptr).data('errorCells',errorCells);
    }
};
var restoreErrorStateFromData = function(ptr) {
    var errorCells = $(ptr).data('errorCells');
    if (errorCells && typeof errorCells.length !== "undefined"
                   && errorCells.length>0) {
        $.each(errorCells,function(index, value) {
            $(value).addClass("ui-state-error ui-state-error-text");
        });
    }
};
grid.jqGrid({
    // all jqGrid parameters
    beforeSelectRow: function(rowid, e) {
        var selrowid = $(this).getGridParam('selrow');
        restoreErrorStateFromData($("#"+selrowid)[0]);

        ptr = $(e.target).closest("tr.jqgrow");
        saveErrorStateInData(ptr);
        return true;
    }
}).bind('mouseover',function(e) {
    var ptr = $(e.target).closest("tr.jqgrow");
    if($(ptr).attr("class") !== "subgrid") {
        $(ptr).addClass("ui-state-hover");
        saveErrorStateInData(ptr);
    }
    return false;
}).bind('mouseout',function(e) {
    var ptr = $(e.target).closest("tr.jqgrow");
    var selrowid = grid.getGridParam('selrow');
    $(ptr).removeClass("ui-state-hover");
    if (ptr.length === 1 && ptr[0].id !== selrowid) {
        restoreErrorStateFromData(ptr);
    }
    return false;
});

在演示中，您将看到所有这些工作原理。

Answer 2

很抱歉回答这个老问题，但我希望其他人可能会觉得它很有用。经过一段时间的寻找解决方案后，我想出了这个：

使用jqGrid colmodel选项'classes'向列添加一个虚拟类（没有样式）。
使用如下选择器添加设置背景的样式：

tr.jqgrow:not(.ui-state-hover):not(.ui-state-highlight) td.mydummycol {
    background-color: #ffd !important; 
}

这样，只有在未选择行或处于悬停状态时才会应用背景。

在jqGrid中选择最高级别的颜色

2 个答案: