即使我消除了背景图像，jqGrid altRows 也根本没有被应用答案

【问题标题】：jqGrid altRows doesn't get applied at all even when I eliminate background-image即使我消除了背景图像，jqGrid altRows 也根本没有被应用
【发布时间】：2018-01-08 14:40:07
【问题描述】：

如此简单的项目和如此神秘的问题。我在 index.html 中的 jqGrid 文档中添加了所有库和文件，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css"/>

<script src="jqGrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/src/jquery.jqGrid.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

然后，我在 html 正文中添加了具有各种 id 的表格：

<body>
   <table id="list2"></table>
   <table id="list3"></table>
   <table id="list4"></table>
</body>

最后但同样重要的是，我在js中添加了带有本地数据的表id：

    $("#list3").jqGrid({
    datatype: "local",
    colNames: ['Fecha/Hora', 'Acceso', 'Resultado', 'Detalle Tipo Evento', 'APN', 'RNC(3G)/BSC(2G)', 'LAC', 'Celda', 'Vel. Max. Descarga', 'Vel. Max. Subida', 'Dispositivo'],
    colModel: [
        {name:'Fecha/Hora',index:'Fecha/Hora', width:200},
        {name:'Acceso',index:'Acceso', width:200},
        {name:'Resultado', index:'Resultado', width: 150},
        {name:'Detalle Tipo Evento', index:'Detalle Tipo Evento', width: 100},
        {name:'APN', index:'APN', width: 100},
        {name:'RNC(3G)/BSC(2G)', index:'RNC(3G)/BSC(2G)', width: 100},
        {name:'LAC', index:'LAC', width: 100},
        {name:'Celda', index:'Celda', width: 100},
        {name:'Vel. Max. Descarga', index:'Vel. Max. Descarga', width: 100},
        {name:'Vel. Max. Subida', index:'Vel. Max. Subida', width: 100},
        {name:'Dispositivo', index: 'Dispositivo', width: 120}
    ],
    autowidth: false,
    shrinkToFit: true,
    altRows: true,
    altclass: 'altRowsClass'
});

...并更新了我的 styles.css 文件以包含我在 js 中指向的类：

.altRowsClass {
  background-image: none;
  background-color: #007fff;
  border: 2px solid green;
}

我阅读了关于名为 altRow 的表对象属性和关于 ui-lightness 主题（默认 altClass 主题如何不可见）的其他问题。尝试使用 ui-darkness 并且没有效果（所有行都变为黑色）。我查看了所有的论坛，所有的问题，但仍然无法终生解决这个问题。

【问题讨论】：

如果您使用Guriddo jqGrid，此选项将被删除并且不再有效。 See here。您可以为此目的使用样式定义
@TonyTomov，现在一切都说得通了。感谢您的信息:)

标签： javascript jquery html css jqgrid

【解决方案1】：

你应该使用 more deep CSS 选择器来覆盖 jQuery UI CSS 中定义的 CSS 规则。而不是.altRowsClass {...} 规则，您应该使用.ui-jqgrid-btable .altRowsClass {...} 或例如

.ui-jqgrid-btable > tbody > .altRowsClass {
    background-image: none;
    background-color: #007fff;
    border: 2px solid green;
}

【讨论】：

我只是尝试实现这个解决方案或使选择器比这更具体的方法，但它也不起作用。显然，jqGrid 的问题在于，如果您使用 Gurrido jqGrid，它会完全删除 altRows: true 选项。
@IuliaMihet：您应该写下您使用的产品的正确名称。 “jqGrid”只存在到版本 4.7。之后，Tony 将产品商业化（参见价格和新许可协议here）将产品重命名为“Guriddo jqGrid JS”（参见the post）。与此同时，我以"free jqGrid" 的名义启动了alternative fork，它可以在 MIT 和 GPL v2 许可下完全免费使用。 “免费 jqGrid”尽量保持对旧 jqGrid 的最大兼容性
我真的不知道此时有 2 个不同的 jqGrid 库。很抱歉造成混乱。