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

在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下面。



打开文档库的视图，编辑页面，找到文档库视图的web part，编辑webpart，在JSLink里面填写：

~sitecollection/Style Library/JSLink/ColumnColor.js





点OK，停止编辑页面。 就会看到下面的效果：



代码下载地址： http://download.csdn.net/detail/spfarm/8427007