jqGrid中使用addRowData新增行时能否实现行分组？

Absolutely, this is totally feasible with jqGrid! Let me walk you through how to make this work for your scenario.

Key Background: jqGrid Grouping Basics #

First, make sure your grid is configured with grouping enabled upfront. This sets the foundation for rows to be automatically grouped based on a shared field value. Here’s a quick example of the core grouping configuration:

$("#yourGridId").jqGrid({
    // ... other grid configs (colModel, datatype, etc.)
    grouping: true,
    groupingView: {
        groupField: ["yourGroupColumn"], // Column to group rows by
        groupText: ["<b>{0}</b>"], // Text displayed for each group header
        groupColumnShow: [true], // Toggle visibility of the grouping column
        groupCollapse: false // Keep groups expanded by default
    }
});

Adding Rows to an Existing Group with addRowData #

When using addRowData, the critical step is to match the grouping field value of the new row to the parent/above row’s grouping value. This tells jqGrid to slot the new row into the correct group automatically.

Here’s a concrete example:
Suppose your grid groups rows by a department column, and you want to add a new row to the "Engineering" group (which already has existing rows):

// Define the new row data, ensuring the grouping field matches the target group
var newRow = {
    id: "uniqueNewRowId",
    department: "Engineering", // Matches the existing group's value
    employeeName: "Jane Doe",
    role: "Senior Developer"
};

// Add the row to the grid (you can specify position relative to a target row)
$("#yourGridId").jqGrid("addRowData", "uniqueNewRowId", newRow, "after", "existingRowIdInGroup");

Refreshing the Group View (If Needed) #

In most cases, jqGrid will update the grouping automatically after addRowData. If you notice the group doesn’t reflect the new row immediately, trigger a lightweight grid reload to refresh the grouping layout without losing your current scroll/pagination position:

$("#yourGridId").trigger("reloadGrid", [{ current: true }]);

For Rowspan-Style Grouping (Similar to the Reference Scenario) #

If your goal is a row-spanning cell look (like the reference example), you’ll need to combine grouping with custom cell formatting. Use the cellattr property in your colModel to add CSS classes for merging cells:

colModel: [
    { 
        name: "department", 
        label: "Department",
        cellattr: function(rowId, val, rawObject, cm, rdata) {
            // Add a class to group cells for styling
            return 'class="group-cell"';
        }
    },
    // ... other columns
]

Then use CSS to hide duplicate group cells and create the rowspan effect:

.group-cell {
    border-bottom: none !important;
}
.group-cell + .group-cell {
    border-top: none !important;
    visibility: hidden;
}

内容的提问来源于stack exchange，提问作者Ram