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

最新推荐文章于 2021-08-31 16:55:50 发布

原创最新推荐文章于 2021-08-31 16:55:50 发布 · 6.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #标签

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

60 篇文章

订阅专栏

JavaScript学习

16 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

前几天刚写了一个根据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'";
        }
    }

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

您可能感兴趣的与本文相关的镜像

Dify

AI应用

Agent编排

Dify 是一款开源的大语言模型（LLM）应用开发平台，它结合了后端即服务(Backend as a Service) 和LLMOps 的理念，让开发者能快速、高效地构建和部署生产级的生成式AI应用。它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈，并且提供了易用的界面和API，让技术和非技术人员都能参与到AI应用的开发过程中