How to Highlight jqGrid Rows Based on Checkbox Values?

Highlighting Rows When Checkboxes Are True

Problem:

When working with a jqGrid, it can be desirable to highlight rows where a checkbox field has been marked as True.

Solution:

To achieve this, you can utilize the rowattr callback feature in version 4.3.2 or higher of jqGrid. This callback allows you to customize row attributes during grid filling, enabling you to assign a unique CSS class to highlighted rows.

Code Example:

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Verify that the testing condition aligns with your usage
        return { "class": "myAltRowClass" };
    }
}

CSS:

The myAltRowClass CSS class should define the background color for the highlighted rows.

Enhanced Code with Column Templates:

To optimize the code further, you can leverage column templates to define common properties and reduce repetition. Here's an example:

cmTemplate: { align: 'center', sortable: false, editable: true, width: 80 },

myCheckboxTemplate = { formatter: 'checkbox', edittype: 'checkbox', type: 'select', editoptions: { value: "1:0" } },

colModel: [
    // Additional columns...

    { name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate },
    { name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate },
]

This enhanced code uses the cmTemplate to set shared properties and the myCheckboxTemplate for the checkbox fields, making the code more readable and maintainable.

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