Home > Web Front-end > JS Tutorial > How to Highlight jqGrid Rows Based on Checkbox Value?

How to Highlight jqGrid Rows Based on Checkbox Value?

Mary-Kate Olsen
Release: 2024-11-07 19:06:03
Original
611 people have browsed it

How to Highlight jqGrid Rows Based on Checkbox Value?

Highlighting Rows Based on Checkbox Value

In a jqGrid, you can highlight rows when the corresponding checkbox is checked. This can be achieved by leveraging the rowattr callback feature.

Implementation

To implement this behavior, use the rowattr callback as follows:

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Verify the condition based on your data
        return {"class": "myAltRowClass"};
    }
}
Copy after login

Explanation

The rowattr callback takes a row data object as its input and returns an object containing additional attributes to apply to that particular row. In this case, we are checking if the GroupHeader property of the row is equal to "1." If so, we return an object that sets the row's CSS class to "myAltRowClass."

CSS Class

You must define the "myAltRowClass" CSS class in your stylesheet to specify the desired row highlighting style, such as background color.

Example

The following code shows an example of how to implement this solution:

$("#maingrid").jqGrid({
    // Other grid options...
    rowattr: function (rd) {
        if (rd.GroupHeader === "1") {
            return {"class": "myAltRowClass"};
        }
    }
});
Copy after login

Additional Notes

  • Column Templates: You can use column templates to simplify and streamline your colModel definitions.
  • gridview: true: Setting gridview: true in your grid options can improve performance and simplify row handling.
  • Verify Compatibility: Ensure that the solution is compatible with your specificjqGrid version.

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template