按照前一篇(
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。
就会看到下面的效果: