如何根据条件在jqgrid中设置背景颜色?

时间:2018-06-16 10:20:07

标签: php jqgrid

在我的jqgrid下面。我想设置完成列有值的行的背景颜色"完成"。我写了代码,但它不适用于我。

 $("#list_records").jqGrid({
                url: "grid.php",
                datatype: "json",
                mtype: "GET",
                colNames: ["S.NO", "Customer Name", "Phone No", "Street", "City", "State", "Pincode", "Country", "EmailId", "Done" ],
                colModel: [
                    { name: "cust_id",align:"center",height: "10", width: "10",},
                    { name: "custname",height: "10", width: "10", },
                    { name: "phoneno",height: "10", width: "10", },
                    { name: "street",height: "10", width: "10", },
                    { name: "city",height: "10", width: "10", },
                    { name: "state",height: "10", width: "10", },
                    { name: "pincode",height: "10", width: "10", },
                   { name: "country",height: "10", width: "10", },                   
                    { name: "email",height: "10", width: "10", },
                   { name: "done",height: "10", width: "10", },


                ],

                viewrecords: true, 
            width: 780,
            height: 200,
            rowNum: 10,
            rowList : ["10:10", "20:20", "30:30", "30000:All"],
           pager: "#perpage"
            gridComplete: function () {
                    for (var i = 0; i < rowsToColor.length; i++) {
                        var status = $("#" + rowsToColor[i]).find("td").eq(10).html();
                        if (status == "Complete") {
                            $("#" + rowsToColor[i]).find("td").css("background-color", "green");
                            $("#" + rowsToColor[i]).find("td").css("color", "silver");
                        }
                    }
                 }   

            }); 

1 个答案:

答案 0 :(得分:0)

实现此目的的有效方法是使用rowattr jqGrid事件。有关Guriddo jqGrid活动的更多信息,您可以look here

这是代码片段:

$("#grid").jqGrid({
    ...
    rowattr : function (rowData, rowObject) {
        if(rowData.somefield == somevalue) {
            return { "class" : "myrowcolorclass"};
        }
    }.
    ....
});

其中myrowcolorclass定义如下:

<style type="text/css">
    .myrowcolorclass td{
        background-color: red;
    }
</style>