How to Highlight a Row in JqGrid When a Checkbox is Checked?

How to Highlight a Row When a Checkbox is True in JqGrid

In a jqGrid, you can easily highlight a row when the checkbox is true. Here's a step-by-step guide:

1. Use the rowattr Callback:
   Version 4.3.2 of jqGrid introduced the rowattr callback, which allows you to set custom attributes for each row. It's perfect for highlighting based on a checkbox value.
2. Create a Rowattr Function:
   Define a rowattr function that checks the value of the GroupHeader column (or any other checkbox column you have). If the value is "1," return a class name that defines the highlighting style.

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Adjust this to match your checkbox column
        return {"class": "myAltRowClass"};
    }
}

3. Define the Highlighting Class:
   In your CSS, create a class called myAltRowClass that specifies the highlighting style, such as a yellow background.
4. Include Column Templates:
   To streamline your code, use column templates to set common properties for multiple columns. For example, if all your text inputs have the same size and maxlength:

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

5. Use Checkbox Templates:
   Similarly, you can create a template for your checkbox columns:

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

Then, in your colModel, instead of defining complex objects for each checkbox column, simply use the template:

{name: 'GroupHeader', index: 'GroupHeader', template: myCheckboxTemplate}

By following these steps, you'll be able to highlight rows based on checkbox values in your jqGrid.

The above is the detailed content of How to Highlight a Row in JqGrid When a Checkbox is Checked?. For more information, please follow other related articles on the PHP Chinese website!