How to Highlight jqGrid Rows Based on Checkbox Column Value?

Highlight Rows Based on Checkbox Value in jqGrid

In jqGrid, you can easily highlight rows based on the value of a checkbox column. Here's how you can achieve this:

Highlighting Rows Using CSS Classes

In your original question, you mentioned using CSS classes to change the background color of highlighted rows. You can use the rowattr callback function to dynamically add CSS classes to rows based on the data in the grid.

The following code demonstrates how to use the rowattr callback:

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") {
        return {"class": "myAltRowClass"};
    }
}

In this example, rows where the GroupHeader column has a value of "1" will be assigned the CSS class myAltRowClass. You should define the CSS rules for this class in your stylesheet to achieve the desired background color.

Highlighting Rows Using Background Colors

Alternatively, you can directly set the background color of highlighted rows using the cellattr callback. This callback can be used to modify the attributes of individual cells within the grid.

Here's an example using the cellattr callback:

gridview: true,
cellattr: function (rd, cell) {
    if (cell.name === "GroupHeader" && rd[cell.name] === "1") {
        return {"style": "background-color: yellow"};
    }
}

In this example, the background color of cells in the GroupHeader column with a value of "1" is set to yellow.

Other Considerations

• Make sure you set gridview: true to enable this feature.
• You may need to adjust the CSS rules depending on your specific requirements.
• Consider using the cmTemplate and template options to simplify the definition of column properties.

The above is the detailed content of How to Highlight jqGrid Rows Based on Checkbox Column Value?. For more information, please follow other related articles on the PHP Chinese website!