行获得焦点（被单击）时的列文本颜色

Question

我使用 jquery 和 jgrid 在 php 中创建网格。我修改了我的网格列的颜色，使用：

$grid[“loadComplete”] = "function(ids) { onloadFunction(ids)";

onloadFunction函数如下：

function onloadFunction(ids) {

   var ids = $(“#lstStudents”).jqGrid(‘getDataIDs’);

   for (var z=0;z<ids.length;z++) {

      var id=ids[z];

      $(“#lstStudents”).jqGrid(‘setCell’,id, ‘quarter1’,”, {‘background’:’rgb(250, 250, 250)’});
      $(“#lstStudents”).jqGrid(‘setCell’,id, ‘quarter1’,”, {‘color’:’rgb(0, 0, 0)’});

   }
}

选择一行时，我在OnloadFunction函数中修改的颜色的列保留在已建立的颜色上，也就是说，它不采用所选行的定义颜色。我如何使修改后的列也具有其余列的背景颜色和文本颜色？

图像更清晰：https://imgur.com/Uhr2sb3

非常感谢您的帮助。

Answer 1

这有点棘手。

你知道内联样式（table 单元格的样式）比 css 具有更高的优先级。此外，突出显示 class 被添加到该行，而自定义 class 被添加到子 table 单元格。

这意味着要解决这个问题，我们需要重新定义突出显示 class 内的单元格 class。

在您的应用程序中执行：

td.mycolor {        
    background:rgb(250, 250, 250);
    color : rgb(100, 200, 300);         
}

使用 setCell 方法将此 class 添加到单元格中

$("#grid").jqGrid("setCell", rowid, "colname", "", "mycolor" );

在mycolorclass的定义下面做：

.ui-widget-content .ui-state-highlight > td.mycolor { 
    background-color: inherit !important;
    color : inherit !important;
}

在 Bootstrap 的情况下，这可能应该是

.table-success > td.mycolor { 
    background-color: inherit !important;
    color : inherit !important;
}

（检查文档以确保在选择该行时添加了哪个 class）

这样，当我们将 class 添加到行时，mycolor 将继承父 class 的颜色。

行获得焦点（被单击）时的列文本颜色

Column text color when row takes focus (is clicked)

javascript

php

jqgrid

jqgrid-php