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

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

作为my feature request修改引入的cellattr属性具有优势，因为它只允许设置/修改单元格HTML代码的属性，并使用某些预定义的格式化程序，如'数字'或'选择'。因此，您可以设置class或style属性，同时使用一些与数据对应的预定义格式化程序。查看this answer，其中显示如何动态设置background-color而不是class和another answer，以显示如何将其设置为style。

The answer还讨论了这两种方法的优点和缺点。

您的代码还有一句话。我不建议您使用
形式的url参数
url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val()

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

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

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

1 个答案: