SharePoint JS Link 之（一）改变column的颜色_js 改变column列的颜色-优快云博客

本文介绍如何在SharePoint 2013中利用JS Link功能不写后台代码，仅通过JavaScript改变列表项表单中Language列的颜色。通过新建JS文件并注册信息，实现不同语言值显示不同颜色的效果。详细步骤包括创建JS文件、编写样式实现方法，以及将文件上传到Style Library并应用到视图。

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

在SharePoint2013之前，想要修改列表项表单的样式，是一件非常痛苦的事情。一般来说，任何的列表都包含三种表单：

1. 新建列表项(new)

2. 编辑属性(edit properties)

3. 查看列表项(view properties)

除此之外，还有一种显示方法，就是在视图(view)显示，比如：

在SharePoint 2013里，新加了一个功能叫JSLink，有了它，不用写任何后台代码，只需要写JS就能修改列表项的显示了。

比如，我想修改Language列的值颜色，不同的语言显示不同的颜色，如何做到呢?

再次之前先新建一个空白js文件。一个JSLink 文件通常包含两个部分：

1. 注册相关信息给SharePoint。

要修改那个表单/视图? 要修改哪个列？新样式的实现方法是哪个？

2. 新样式的实现方法

这里面返回新的样式的html代码。

首先说第一点。

(function () {
 
   var FiledContext = {};
   FiledContext.Templates = {};
   FiledContext.Templates.Fields = {
       //为我们要修改颜色的列，定义一个重写样式的方法
       "Language": { "View": FiledTemplate }
                   //Language是要修改颜色的列
     //View表示要修改的是视图上的显示
     //FieldTemplate 是新的样式的实现方法
   };
   
   //注册Context给SharePoint
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FiledContext);
 
})();

第二点，返回新的样式：

// 重写样式的方法
function FiledTemplate(ctx) {
 
   var Language = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
 
   //在这里返回新的html
   switch (Language) {
       case "English":
           return "<spanstyle='color :#D9D919'>" + Language + "</span>";
           break;
       case "Korean (Korea)":
           return "<span style='color :#2D882D'>" + Language +"</span>";
           break;     
    }
}

最终的代码是：

(function () {
 
   var FiledContext = {};
   FiledContext.Templates = {};
   FiledContext.Templates.Fields = {
       //为我们要修改颜色的列，定义一个重写样式的方法
       "Language": { "View": FiledTemplate }
   };
   
   //注册Context给SharePoint
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FiledContext);
 
})();
 
// 重写样式的方法
function FiledTemplate(ctx) {
 
   var Language = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
 
   //在这里返回新的html
   switch (Language) {
       case "English":
           return "<span style='color :#D9D919'>" + Language +"</span>";
           break;
       case "Korean (Korea)":
           return "<span style='color :#2D882D'>" + Language +"</span>";
           break;     
    }
}

把文件保存成ColumnColor.js，上传到Style Library里。其实你也可以传到其他文档库里，或者是layout下面。