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