Question

当我将样式类myAltRowClass应用于jqgrid color的更改odd even row时。左，右和底部边框为黑色。

我希望odd even row color通过all jqgrids

应用css

网格如下图所示。

oddevenproblem

在loadComplete函数中的代码下方使用时，不会出现此问题

$("tr.jqgrow:odd").css("background", "#E0E0E0");

jqgrid如下图所示。

oddevenrow

Css Class

.myAltRowClass {
    background: #E0E0E0;
}

代码：

$(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/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='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }

Answer 1

The demo演示了如何定义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; }

因此，对于奇数/偶数/悬停/选定的行，可以获得非常多彩的图片，例如不同的颜色或背景颜色：

enter image description here

颜色看起来很糟糕。我想要演示如何在那里定制。

Answer 2

在border-color: #79B7E7中添加了myAltRowClass。 jqgrid奇数行背景颜色无边框更改。

.myAltRowClass {
   background: #E0E0E0;
   border-color: #79B7E7;
}

jqgrid奇偶行颜色

2 个答案: