About changing the background color of jqgrid after selection

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

Modified as follows

Step 1: Define Styles

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

Step 2: Turn on multi-select

  multiselect: true,

Step 3: Listening to events, dynamically adding background color
jqGrid has two listening events when creating a table,

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");