使所选颜色达到jqGrid的最高级别 [英] Make selected color highest level in jqGrid

问题描述

我更改gridComplete: function(){中某些单元格的颜色.这将覆盖悬停或选定的颜色.我想将悬停和选定的颜色设为最高级别.也就是说，如果我选择了彩色行，它将更改为所选颜色.

I change the color of some cells in the gridComplete: function(){ . This override the hover or selected color. I want to make the hover and selected colors the highest level. i.e. if I selected a colored row, it changes to the selected color.

推荐答案

我想您的问题仍在另一个演示，其代码更长于我的回答对您先前的问题.

I suppose your question continues your previous question about the the color of the some cells. I created another demo which code is longer as my previous example from my answer to your previous question.

设置单元格(<td>元素)的颜色的主要问题是，单元格的类别作为行的类别当然具有更高的优先级，因为根据行类别的定义，它不是！important"！ "属性.因此，要使选定的悬停单元格与其他标准单元格完全一样，就必须删除会更改其颜色的单元格类.在取消选择"或悬停"之后，对应的第一行应还原已删除的单元格类("ui-state-error ui-state-error-text"类).我使用以下代码实现了此行为:

The main problem with the setting of the color of the cell (<td> element) is that the class of cell has of course higher priority as the classes of row because by the definition of the row classes was no "!important" attribute used. So to be able to make the selected of hovered cell be exactly like other standard cells one have to remove the cell class which changes its color. After "unselecting" or "unhovering" the corresponding row one should restore the removed cell class (the 'ui-state-error ui-state-error-text' classes). I implemented this behavior with the following code:

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

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

On the demo you will see how all this work.

这篇关于使所选颜色达到jqGrid的最高级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！