JQGrid：如何根据内容设置单元格样式

Question

我想根据单元格的内容设置单元格的背景颜色。

我的第一个问题：有没有办法从 xml 数据中设置单元格的背景颜色？

如果没有，这是我的网格定义：

$("#grid_sites").jqGrid({
    url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val(),
    datatype: "local",
    height: 160,
    width: 832,
    shrinkToFit: true,
    caption:"",
    colNames :["Site","Name","PI","Location","Phone","Status"],
    colModel :[
       {name:"sitenumber",  index:"sitenumber",  width:50,   align:"right"},
       {name:"name",        index:"name",        width:120},
       {name:"location",        index:"location",    width:100},
       {name:"phone",       index:"phone",       width:100},
       {name:"status",      index:"status",      width:70}
    ],
    pager:"pager_sites",
    scroll: 1,
    viewrecords:true,
    sortable:true,
    sortname: "sitenumber",
    autowidth: true,
    pgbuttons: false,
    loadonce: true,
    gridview: true
});

我想根据其内容更改状态单元格的背景颜色。 我知道我可能应该在状态列上使用格式化程序，但我不确定仅更改该单元格背景颜色的代码。

{name:"status",  index:"status",   width:70, formatter: statusFormatter}

function statusFormatter(cellvalue, options, rowObject)
{
   What exactly would go here for something like this:

   if (cellValue == 'Pending') change the cell's background color to yellow
   else if (cellValue == 'Approved') change the cells's background color to green;
}

谢谢！

Answer 1

有很多方法可以做你想做的事。在 答案您会找到一个示例，如何使用自定义格式化程序根据单元格的内容更改单元格的背景颜色。答案写在引入 cellattr 属性之前。自定义格式化程序的主要目的是根据单元格的数据创建单元格的 HTML 内容。

作为 我的功能请求有优势，因为它只允许设置/修改 HTML 代码的属性细胞并使用一些预定义的格式化程序，例如“数字”或“选择”。因此，您只需设置 class 或 style 属性，并同时使用一些与数据包含相对应的预定义格式化程序。查看这个答案，它展示了如何动态设置background-color 超过 class 和 另一个答案它展示了如何通过 style 设置它。

答案另外讨论了优点和缺点这两种方法。

对您的代码还有一点注释。我不建议您在表单中使用 url 参数。

url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val()

它有两个重要的缺点。首先，如果包含 $('#hdnStudyDetailId').val() ，则可能会以错误的方式在服务器上发送和解码 $('#hdnStudyDetailId').val( ) 包含一些特殊字符（' '、'+'、'='、'ä'、'д'、'电'、...）。第二个问题是，'#hdnStudyDetailId' 中的值在网格创建时只会读取一次。因此，在任何刷新网格时，都将使用 '#hdnStudyDetailId' 元素中的相同旧值，例如按另一列排序、分页等。我建议您阅读 答案并使用关于url和postData参数的URL：

url: "getgridxmlsites.php",
postData: {
    detailid: function() { return $('#hdnStudyDetailId').val(); }
}