jqgrid实现单个字段的背景色根据内容变色

ZhuangYQ丶

于 2017-08-31 11:35:06 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET学习中出现的问题 JavaScript学习文章标签： jqgrid 标签

本文链接：https://blog.csdn.net/iilegend/article/details/77744237

ASP.NET学习中出现的问题同时被 2 个专栏收录

60 篇文章

订阅专栏

JavaScript学习

16 篇文章

订阅专栏

本文介绍了如何使用jqgrid实现表格中单个字段的背景色根据其内容变化。通过在colmodel中设置cellattr属性，并定义JavaScript函数addCellAttr，可以达到当提交状态为'已提交'时，对应字段背景色改变的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天刚写了一个根据jqgrid的内容使整个行的背景色变化来特殊区分，现在写一个根据内容来吧每列中的单个字段背景色变化。
直接效果图：
这里写图片描述
提交状态为“已提交”的背景色变色。
实现过程：
在colmodel中：

 colModel: [
                { label: "主键", name: "Id", hidden: true, key: true },
                {
                    label: '时间', name: 'Time', width: 80, align: 'left',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
                },
                { label: '上报人', name: 'Reporter', width: 100, align: 'left' },
                { label: '负责人', name: 'Manager', width: 100, align: 'left' },
                 { label: '提交状态', name: 'SubmitState', width: 80, align: 'left', cellattr: addCellAttr },
            ],

重点在cellattr: addCellAttr
然后写一个addCellAttr的JavaScript：

function addCellAttr(rowId, val, rawObject, cm, rdata) {
        if (rawObject.SubmitState == '已提交') {
            return "style='background-color:#7CCD7C'";
        }
    }

这样就实现了单个字段背景色变色。