首页 > Web开发 > 详细

SharePoint JS Link 之(二) 改变表单中column的颜色

时间:2015-02-06 15:01:59      阅读:307      评论:0      收藏:0      [点我收藏+]

按照前一篇( 

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。

 

就会看到下面的效果:

技术分享

 

SharePoint JS Link 之(二) 改变表单中column的颜色

原文:http://blog.csdn.net/spfarm/article/details/43563187

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!