jqGrid导出PDF时如何保留高亮行样式？

jqGrid自带的exportToPdf方法默认不会自动识别通过setRowData添加的自定义CSS类样式，所以你设置的高亮背景色无法被带入导出的PDF中。可以通过配置customSettings里的回调函数手动处理行样式，具体实现如下：

方案一：通过行索引匹配高亮行 #

先把之前用setRowData设置高亮的行索引收集到数组中，再修改导出代码：

// 假设已收集需要高亮的行索引到highlightedRows数组
const highlightedRows = [/* 填入你的目标行索引，比如0、2、4 */];

$("#inventoryOnHandSearchGrid").jqGrid("exportToPdf", {
    title: 'Quantity On Hand',
    orientation: 'landscape',
    pageSize: 'A3',
    description: "Date: " + todaysDate,
    customSettings: {
        modifyRow: function(row, rowIdx) {
            // 判断当前行是否属于高亮列表
            if (highlightedRows.includes(rowIdx)) {
                row.backgroundColor = 'lightyellow';
            }
            return row;
        }
    },
    download: 'download',
    includeLabels: true,
    includeGroupHeader: true,
    includeFooter: true,
    fileName: "qtyOnHand.pdf"
});

方案二：通过DOM元素直接获取高亮行 #

如果没有提前保存行索引，可以直接从页面中抓取带有css-class的行ID，再在导出时匹配：

// 从DOM中获取所有带css-class的行ID
const highlightedRowIds = $("#inventoryOnHandSearchGrid .css-class").map(function() {
    return $(this).attr('id');
}).get();

$("#inventoryOnHandSearchGrid").jqGrid("exportToPdf", {
    title: 'Quantity On Hand',
    orientation: 'landscape',
    pageSize: 'A3',
    description: "Date: " + todaysDate,
    customSettings: {
        modifyRow: function(row, rowIdx, rowId) {
            if (highlightedRowIds.includes(rowId)) {
                row.backgroundColor = 'lightyellow';
            }
            return row;
        }
    },
    download: 'download',
    includeLabels: true,
    includeGroupHeader: true,
    includeFooter: true,
    fileName: "qtyOnHand.pdf"
});

原理说明：customSettings中的modifyRow回调会在PDF导出处理每一行数据时触发，通过判断行索引或行ID，直接设置row.backgroundColor属性，就能让导出的PDF显示对应行的高亮背景色。

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