jqgrid奇偶行颜色
当我将样式类myAltRowClass应用于jqgrid odd even row更改color时。 左，右和底部边框为黑色。
我想通过css为all jqgrids应用odd even row color
网格如下图所示 。
当在loadComplete函数中使用下面的代码时，不会发生此问题
$("tr.jqgrow:odd").css("background", "#E0E0E0");
jqgrid看起来像下面的截图 。
Cssclass
.myAltRowClass { background: #E0E0E0; }
码：
$(document).ready(function(){ //jqGrid $("#usersList").jqGrid({ url:'/Admin/getAllUsersList', datatype: "json", colNames:['Edit','First Name','Middle Name','LastName','Mobile Number','Active'], colModel:[ {name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink}, {name:'firstName',index:'firstName', width:100}, {name:'middleName',index:'middleName', width:100}, {name:'lastName',index:'lastName', width:100}, {name:'mobileNo',index:'user.mobileNo', width:100}, {name:'isActive',index:'user.isActive',width:80}, ], rowNum:20, rowList:[10,20,30,40,50], rownumbers: true, pager: '#pagerDiv', sortname: 'user.primaryEmail', viewrecords: true, sortorder: "asc", loadComplete: function() { //$("tr.jqgrow:odd").css("background", "#E0E0E0"); $("tr.jqgrow:odd").addClass('myAltRowClass'); }, }); $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%"); $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65); $('#load_usersList').width("130"); $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true}); $(".inline").colorbox({inline:true, width:"20%"}); }); function editLink(cellValue, options, rowdata, action) { return "<a href='https://stackoverflow.com/questions/21906215/jqgrid-odd-even-row-color//Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' >"; }
该演示演示了如何定义CSS规则并将规则设置为网格的奇数行和偶数行。 演示中使用的代码
loadComplete: function () { $(this).find(">tbody>tr.jqgrow:odd").addClass("myAltRowClassEven"); $(this).find(">tbody>tr.jqgrow:even").addClass("myAltRowClassOdd"); }
重要的是要了解jqGrid使用网格中的第一个隐藏行来设置列宽。 所以必须使用jQuery ：even选择器在奇数行上设置类，并且必须使用：odd选择器在偶数行上设置类。
我在演示中使用的CSS规则如下
.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; color: Tomato; } .myAltRowClassOdd { background: DarkOrange; } .ui-state-hover.myAltRowClassEven { color: Magenta; } .ui-state-hover.myAltRowClassOdd { color: RoyalBlue; } .ui-state-highlight.myAltRowClassEven { color: PaleGreen; } .ui-state-highlight.myAltRowClassOdd { color: Sienna; }
因此，对于奇数/偶数/hover/选定的行，可以获得非常多彩的图片，例如具有不同的颜色或背景颜色：
颜色看起来很糟糕。 我想要演示如何在那里定制。
在myAltRowClass添加了border-color: #79B7E7 myAltRowClass 。 jqgrid奇数行背景颜色无边框更改。
.myAltRowClass { background: #E0E0E0; border-color: #79B7E7; }