如何在JQGrid中更改任何行的背景颜色和字体？

Question

我试图改变JQGrid中任何行的背景颜色，但我还没有任何解决方案。有谁能够帮我？

提前致谢。

Answer 1

调用loadComplete函数来改变jqgrid中行的背景颜色。

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

用于将样式应用于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%"
    });
});

<强>截图：

Answer 2

你可以从你的jquery Css图像和主题改变它.. 如果您想为特定网格做，请按照以下步骤操作： -

    Steps:-
           1) open jquery-ui.custom.css (Ex:jquery-ui-1.8.18.custom.css)
           2) create css class .ui-widget-content-own { border: 1px solid #dddddd;background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }

           3) JQuery("#jqgrid_id").removeClass("ui-widget-content jqgrow ui-row-ltr");
           4) JQuery("#jqgrid_id").addClass("ui-widget-content-own jqgrow ui-row-ltr");

   Note:change background property from css class 

如果您想更改特定行，请执行此操作

  $("#jqgrid-id").find("#grid_row_id").removeClass("ui-widget-content jqgrow ui-row-ltr");

   $("#jqgrid-id").find("#grid_row_id").addClass("ui-widget-content-own jqgrow ui-row-ltr");