SharePoint JS Link 之（二） 改变表单中column的颜色

按照前一篇( 

SharePoint JS Link 之（一） 改变column的颜色

)修改之后，查看文档属性，发现Language列颜色并没有变：

要想让这个颜色变，需要做一些修改。为displayForm注册一个事件： 

 

(function () {
 
   var FieldContext = {};
   FieldContext.Templates = {};
   FieldContext.Templates.Fields = {
       //为我们要修改颜色的列，定义一个重写样式的方法
       "Language": { "View": FieldTemplate,"DisplayForm": DisplayTemplate}
   };
   
   //注册Context给SharePoint
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FieldContext);
})();

然后再添加一个实现函数。这里我们为Language列设置背景色。

 

function DisplayForm(ctx) {
 
   var Language = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
 
   switch (Language) {
       case "English":
           return "<span style='background-color :#D9D919'>" +Language + "</span>";
           break;
       case "Korean (Korea)":
           return "<span style='background-color :#2D882D'>" +Language + "</span>";
           break;               
    }
}

最终的代码是：

 

function DisplayForm(ctx) {
 
   var Language = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
 
   switch (Language) {
       case "English":
           return "<spanstyle='background-color :#D9D919'>" + Language +"</span>";
           break;
       case "Korean (Korea)":
           return "<span style='background-color :#2D882D'>" +Language + "</span>";
           break;               
    }
}

保存文件，上传到Style Library里(原来的地方)。

 

找到任何一个列表项，进去到view properties页面，然后edit page，给display form的webpart属性里，加JSLink。

 

就会看到下面的效果：