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