Ссылка JS - изменение цвета ячейки в зависимости от значения текста

Question

У меня есть список задач в Sharepoint с колонкой под названием «Здоровье». Этот столбец содержит раскрывающийся список текстовых значений «Зеленый», «Красный», «Желтый», «Синий» и «Серый».

Я хотел бы создать файл ссылок JS, чтобы отображать цвет фона ячейки только на основе этих текстовых значений.

Я сделал это успешно, используя веб-часть редактора сценариев, но я бы предпочел добиться этого с помощью ссылки JS (на одну страницу меньше на моих страницах).

Ниже приведено то, что я вставил в веб-часть редактора сценариев. Мне нужно что-то подобное в виде файла ссылки 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>

Я пробовал несколько фрагментов из разных потоков, но ничего не получалось. Все остальные мои JS-файлы работают так, что это либо ошибка оператора, либо неверный код.

Answer 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>

См .: Цветной вывод в виде списка с JSLink