如此简单的项目和如此神秘的问题。我在jqGrid文档的index.html中添加了所有库和文件,如下所示:
<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,无效果(所有行均变黑)。我浏览了所有论坛,所有问题,但终生都无法解决。
最佳答案
您应该使用更深的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;
}