选定的行背景颜色答案

【问题标题】：Selected row background color选定的行背景颜色
【发布时间】：2010-11-29 15:34:25
【问题描述】：

我正在使用带有 jquery-ui 'smoothness' 主题的 jqgrid，不幸的是，对于这个主题，选定的行背景颜色太浅，我正在尝试更改背景颜色以使其更明显。我尝试在 css 中更改 ui-state-highlight（使用 !important 覆盖），但这不起作用。有没有 CSS 方法可以做到这一点，或者 jqgrid 自定义格式化程序是要走的路？

【问题讨论】：

标签： jquery-ui jqgrid

【解决方案1】：

ui-state-highlight 类使用background CSS 属性。所以一个小技巧是使用background而不是background-color来去除背景图片。例如

.ui-state-highlight { background: yellow !important; }

观看直播here。

更新：不必使用!important。指定一个更具体的规则就足够了，比如

.ui-jqgrid-btable .ui-state-highlight { background: yellow; }

或

.ui-jqgrid .ui-state-highlight { background: yellow; }

【讨论】：

谢谢，这正是我想要的！

【解决方案2】：

jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue');

您可以在 jquery 文件中添加这样的内容

【讨论】：

【解决方案3】：

假设如果我们希望选定的行单元格使用一种颜色，而剩余的行单元格具有不同的颜色，

在下面的示例中，突出显示的行单元格数据将为黄色，其余行单元格数据将为蓝色

假设我们有两个类，名称分别为蓝色背景的“holdRow”和黄色背景的“HighlightHoldRow”，然后使用下面的代码“RowSelect”是在行选择期间调用的方法，

考虑下面的代码

   .holdRow td {
font-weight : bold !important;
color: Blue !important;
  }

   .higLightholdRow td {
font-weight : bold !important;
color: Yellow !important;

}

   var LastRowId = "";
    function RowSelect(id) {
if (Flag == "TRUE") {
    var grid = $('#gvName);
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) {
        tr = grid[0].rows.namedItem(LastRowId);
        $(tr).removeClass("higLightholdRow");
        $(tr).addClass("holdRow");
        LastRowId = "";
    }
    tr = grid[0].rows.namedItem(id);
    $(tr).removeClass("holdRow");
    $(tr).addClass("higLightholdRow");
    LastRowId = id;
    }

}

在 Trirand Grid 声明期间，我们可以使用以下位置调用此客户端事件。

   ClientSideEvents-RowSelect="RowSelect"

在选择行时调用RowSelect方法，选中的行背景为黄色，其余行背景为蓝色

【讨论】：