JS 链接 - 根据文本值更改单元格背景颜色答案

【问题标题】：JS link - Change Cell bg color based on text valueJS 链接 - 根据文本值更改单元格背景颜色
【发布时间】：2019-06-10 09:37:41
【问题描述】：

我在 Sharepoint 中有一个任务列表，其中有一列标题为“健康”。此列包含文本值“Green”、“Red”、“Yellow”、“Blue”和“Grey”的下拉列表。

我想创建一个 JS 链接文件，以仅根据这些文本值呈现单元格背景颜色。

我使用脚本编辑器 webpart 成功地做到了这一点，但我宁愿使用 JS 链接来实现这一点（我的页面上少了一个 webpart）。

以下是我插入到我的脚本编辑器 webpart 中的内容。我需要 JS 链接文件形式的类似内容。

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $Text = $("td.ms-cellstyle.ms-vb2:contains('Blue')");
        $Text.css("background-color", "#0000FF");
        $Text = $("td.ms-cellstyle.ms-vb2:contains('Green')");
        $Text.css("background-color", "Green");
        $Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")
        $Text.css("background-color", "#e18620");
    });
</script>

我尝试了来自不同线程的多个 sn-ps，但没有任何效果。我所有的其他 JS 文件都可以正常工作，所以要么是操作员错误，要么是错误代码。

【问题讨论】：

标签： javascript sharepoint

【解决方案1】：

以下代码供大家参考。

<script type="text/javascript">
(function () { 
    // Create object that have the context information about the field that we want to change it's output render  
    var fieldContext = {}; 
    fieldContext.Templates = {}; 
    fieldContext.Templates.Fields = { 
        // Apply the new rendering for Available field on List View 
        "Health": { "View": fieldTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
})();  
// This function provides the rendering logic for list view 
function fieldTemplate(ctx) { 
    var health = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<span style='background-color: "+health+";'>" + health + "</span>";
}
</script>

参考：Colored output in list view with JSLink

【讨论】：