SharePointJSLink之（二）改變表單中column的顏色

SharePointJSLink之（二）改變表單中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。

 

就會看到下面的效果：