如何通过sell按钮修改jqWidgets jQuery Grid指定行Code单元格CSS背景色？

针对你的需求，有两种实用方法可以实现点击sell按钮后修改对应行Code单元格的背景色：

方法一：直接操作DOM元素（快速实现） #

在sell列的buttonclick函数中，利用jqGrid的getcell方法获取目标单元格的DOM元素，直接修改其样式：

buttonclick: function(rowData) {
    var dataRecord = $("#ProductPriceList").jqxGrid('getrowdata', rowData);
    sellIndex = $("#ProductPriceList").jqxGrid('getrowboundindex', rowData);
    
    // 获取指定行的ProductCode列单元格DOM元素
    var cellElement = $("#ProductPriceList").jqxGrid('getcell', sellIndex, 'ProductCode');
    // 设置背景色（可替换为你需要的颜色值）
    cellElement[0].style.backgroundColor = '#ffcccc';
}

说明 #

• getcell(boundIndex, dataField)方法会返回对应单元格的jQuery对象，直接操作其style属性即可快速修改样式。
• 这种方法适合临时样式修改，若表格刷新（如排序、分页），样式会丢失。

方法二：通过cellclassname配置（持久化、可维护） #

这种方法通过配置列的cellclassname结合行数据更新，让样式跟随表格状态同步，更符合组件规范：

步骤1：修改Code列的配置，添加cellclassname #

{
    text: 'Code',
    datafield: 'ProductCode',
    columntype: 'textbox',
    filtercondition: 'contains',
    width: '5%',
    // 根据行数据动态返回CSS类
    cellclassname: function(row, columnfield, value, data) {
        return data.__highlightCodeCell ? 'highlight-code-cell' : '';
    }
}

步骤2：定义CSS样式类 #

.highlight-code-cell {
    background-color: #ffcccc !important;
    /* 可添加其他样式，如文字颜色、边框等 */
}

步骤3：修改sell按钮的buttonclick函数，更新行数据标记 #

buttonclick: function(rowData) {
    var dataRecord = $("#ProductPriceList").jqxGrid('getrowdata', rowData);
    sellIndex = $("#ProductPriceList").jqxGrid('getrowboundindex', rowData);
    
    // 清除之前所有行的高亮标记（可选，若只需要高亮当前行）
    const allRows = $("#ProductPriceList").jqxGrid('getrows');
    allRows.forEach(row => {
        if (row.__highlightCodeCell) {
            row.__highlightCodeCell = false;
            $("#ProductPriceList").jqxGrid('updaterow', row.boundindex, row);
        }
    });
    
    // 给当前行添加高亮标记
    dataRecord.__highlightCodeCell = true;
    $("#ProductPriceList").jqxGrid('updaterow', sellIndex, dataRecord);
}

说明 #

• 通过给行数据添加自定义字段__highlightCodeCell，让cellclassname函数根据该字段判断是否应用高亮类。
• 表格刷新时样式会自动保持，样式由CSS统一管理，便于后续修改和维护。

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