选定的行背景颜色

Posted 2021-03-31

我正在使用jqgrid和jquery-ui'smoothness'主题，遗憾的是，在这个主题中，所选行的背景颜色太亮了，我正在尝试更改背景颜色以使其更加明显。我已经尝试在css中更改ui-state-highlight（使用！important override），但这不起作用。是否有CSS方法来执行此操作或者可能是jqgrid自定义格式化程序？

答案

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

另一答案

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

您可以在jquery文件中添加如下内容

另一答案

假设我们想要所选行单元格的一种颜色和剩余的具有不同颜色的行单元格，

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

假设我们有两个类，其名称为“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声明期间，我们可以使用以下loc来调用此Client side事件。

   ClientSideEvents-RowSelect="RowSelect"

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