jqgrid奇偶行颜色 [英] jqgrid odd even row color

问题描述

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

When I apply style class myAltRowClass for change color of jqgrid odd even row. left, right and bottom borders are in black color.

我想通过css为all jqgrids申请odd even row color

网格看起来像下面的屏幕截图.

在loadComplete函数中的以下代码中使用时，不会发生此问题

When used below code in loadComplete function this problem is not occurred

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

jqgrid类似于下面的屏幕截图.

CSS类

.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>";
        }

推荐答案

演示演示了如何定义CSS规则，以及如何将规则设置为网格的奇数行和偶数行.演示中使用的代码

The demo demonstrates how to define CSS rules and set the rules to odd and even rows of the grid. The code used in the demo

loadComplete: function () {
    $(this).find(">tbody>tr.jqgrow:odd").addClass("myAltRowClassEven");
    $(this).find(">tbody>tr.jqgrow:even").addClass("myAltRowClassOdd");
}

重要的是要了解jqGrid使用网格中的第一 hidden 行来设置列宽.因此，必须使用jQuery :even 选择器将类设置为 odd 行，并且必须使用:odd 选择器在 even上设置类行.

It's important to understand that jqGrid use first hidden row in the grid to set the column widths. So one have to use jQuery :even selector to set class on odd rows and one have to use :odd selector to set class on even rows.

我在演示中使用的CSS规则如下

The CSS rules which I used in the demo are the following

.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; }

结果是，对于奇数/偶数/悬停/选定的行，将获得非常多色的图片，例如具有不同的颜色或背景颜色:

As the result one get very multicolored picture like with different colors or background colors for odd/even/hovered/selected rows:

颜色看起来很糟糕.我只想演示如何在其中进行自定义.

The colors looks terrible. I wanted just demonstrates how one customize there.

这篇关于jqgrid奇偶行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！