How to Highlight Rows in jqGrid Based on Checkbox Value?

Highlighting Rows Based on Checkbox Value

In jqGrid, you can highlight rows where a specific checkbox is true, giving you visual feedback when certain conditions are met. This can be achieved through callbacks and CSS styling.

Implementation:

1. Rowattr Callback: Utilize the rowattr callback to set custom attributes to rows. In your case, you can define a CSS class for highlighted rows.

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}

2. CSS Styling: Define a CSS class to control the appearance of highlighted rows. For example, you could use the following:

.myAltRowClass {
    background-color: #ffff00;
}

Alternative Solution:

In addition to the rowattr callback, jqGrid version 4.3.2 offers a new feature called gridview, which enhances performance and provides a neater way to highlight rows.

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}

Column Templates:

To streamline your code, consider using column templates to define common properties for multiple columns. This simplifies your column definitions and makes them easier to maintain.

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
...
colModel: [
    {name: 'TypeID', ...},
    {name: 'Order1', template: myTextareaTemplate},
    // ...
]

Example:

#maingrid").jqGrid({
    rowattr: function (rd) {
        if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
            return {"class": "myAltRowClass"};
        }
    },
    cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
    colModel: [
        {name: 'TypeID', ...},
        {name: 'Order1', template: myTextareaTemplate},
        // ...
    ]
});

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