About jqgrid changing background color after selection

After jqgrid opens the selection, if the selection data has no background color, it looks very ugly. The
prototype is as follows

Modified as follows

Step 1: Define the style

 .SelectBG {
            background-color: #E2D5EC; //这个颜色自己调整
        }

Step 2: Enable multi-select

  multiselect: true,

Step 3: Listen for events, dynamically add background color
When jqGrid creates a table, there are two listening events,

code show as below

onSelectRow: function (rowid, status, rowData) {
                if (status) {
                    $('#' + rowid).find("td").addClass("SelectBG");
                } else {
                    $('#' + rowid).find("td").removeClass("SelectBG");

                }
            },
onSelectAll: function (rowids, status) {
                for (var i = 0; i < rowids.length; i++) {
                    if (status) {
                        $('#' + rowids[i]).find("td").addClass("SelectBG");
                    } else {
                        $('#' + rowids[i]).find("td").removeClass("SelectBG");

                    }
                }
            }

The complete code is as follows:
 

jQuery(tableId).jqGrid({
            datatype: "json",
            mtype: 'post',
            colNames: colNameData,
            colModel: colModelData,
            viewrecords: true,
            width: $("#layout-center").width()-30,
            height: tableHeight,
            rowNum: 15,
            rowList: [15, 20, 30],
            pager: pagerId,
            footerrow: false,
            multiselect: true,
            userDataOnFooter: true,
            rownumbers: rownumbers,
            rownumWidth: 45,
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    updatePagerIcons(table);
                }, 0);
            },
            gridComplete: function () {

            },
            onSelectRow: function (rowid, status, rowData) {
                if (status) {
                    $('#' + rowid).find("td").addClass("SelectBG");
                } else {
                    $('#' + rowid).find("td").removeClass("SelectBG");

                }
            },
            onSelectAll: function (rowids, status) {
                for (var i = 0; i < rowids.length; i++) {
                    if (status) {
                        $('#' + rowids[i]).find("td").addClass("SelectBG");
                    } else {
                        $('#' + rowids[i]).find("td").removeClass("SelectBG");

                    }
                }
            }
        }).trigger("reloadGrid");

 

{{o.name}}

{{m.name}}