如何更改JQGrid中任何行的背景颜色和字体? [英] How can I change Background colour and Font of any row in JQGrid?

问题描述

我正在尝试更改JQGrid中任何行的背景颜色，但是我没有任何解决方案.有谁能够帮助我?

Iam trying to change the background colour of any row in JQGrid, Still I don't have any solution. Can anybody help me?

谢谢.

推荐答案

调用loadComplete函数更改jqgrid中行的背景颜色.

Call loadComplete function to change background color of row in jqgrid.

loadComplete : function() {
    $("tr.jqgrow:odd").addClass('myAltRowClassEven');
    $("tr.jqgrow:even").addClass('myAltRowClassOdd');
},

在CSS下方将样式应用于背景使用.

for applying styles to background use below css.

<style type="text/css">
.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; font: italic; font-family: sans-serif;}
.myAltRowClassOdd { background: orange; font: bold; font-family: Segoe Print, Tahoma, Comic Sans MS, Georgia}
</style>

代码:在jqgrid中

$(document).ready(function(){  
    //jqGrid
    $("#projectsList").jqGrid({
        url:'<%=request.getContextPath()%>/Projects/getProjectsList',
        datatype : "json",
        mtype: 'GET',
        colNames : ['Edit','Delete','Client','ProjectSuit','Project','Description','Primary','Others', 'UATOn','ProductionOn', 'Status','ActiveYN'],
        colModel : [
        {name : 'projectId', index : 'projectId', width:'35%', search : false, sortable : false, formatter : editLink}, 
        {name : 'projectId', index : 'projectId', width:'40%', search : false, sortable : false, formatter : deleteLink}, 
        {name : 'client',index : 'customer.customerName', sortable : false},
        {name : 'projectSuit',index : 'projectSuite.projectSuitName'},
        {name : 'projectName',index : 'projectName'},
        {name : 'description',index : 'description'},
        {name : 'primary',index : 'primary'}, 
        {name : 'others',index : 'others'}, 
        {name : 'strUATDate',index : 'uatDate', searchoptions:{sopt:['eq', 'ne', 'lt', 'le', 'gt', 'ge']}}, 
        {name : 'strProductionDate',index : 'productionDate', searchoptions:{sopt:['eq', 'ne', 'lt', 'le', 'gt', 'ge']}},
        {name : 'strStatus',    index : 'strStatus'}, 
        {name : 'strActive',index : 'strActive'}, ],
        rowNum : 10,
        rowList : [ 10, 20, 30, 40, 50 ],
        rownumbers : true,pager : '#pagerDiv',
        sortname : 'projectId',
        viewrecords : true,
        sortorder : "asc",
        scrollOffset:0,
        caption : 'Projects',
        loadComplete : function() {
                $("tr.jqgrow:odd").addClass('myAltRowClassEven');
                $("tr.jqgrow:even").addClass('myAltRowClassOdd');
            },
    });

    $('#gridContainer div:not(.ui-jqgrid-titlebar)').width('100%');
    $('.ui-jqgrid-bdiv').css('height', '100%');
    $('#load_projectsList').width("130");
    $("#projectsList").jqGrid('navGrid', '#pagerDiv', {edit : false, add : false, del : false }, {}, {}, {}, {multipleSearch:true, closeAfterSearch : true});
    $(".inline").colorbox({
        inline : true,width : "20%"
    });
});

屏幕截图:

这篇关于如何更改JQGrid中任何行的背景颜色和字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！