Logo

Sharepoint 2013 列表使用JS Link

photo

2020年09月12日

使用JS Link可以向Sharepoint List注册脚本,重写Field模板,使得对于符合条件的字段改变格式和样式。但是有一个问题是,页面postback的话,JS不会被触发,不知道怎么解,有知道的留言下,谢谢。

Update:postback不触发js,需要把JS Link写成这样: xxxxxx.js | ~sitecollection/SiteAssets/js/xxxxxx.js

webpart中或者是列表中添加JS Link

JS Link地址的格式如下,不能写相对路径或者绝对路径,不然Alert不出来的。

~sitecollection/SiteAssets/js/xxxxxx.js

实例代码,功能是,一个Url 类型的字段,如果字段的文本日期是这个月的显示黄色,是下个月的显示粉色,是上个月的显示绿色。

字段类型

var myDate = new Date();
var month=myDate.getMonth()+1; 
(function () { 
 
    // Create object that have the context information about the field that we want to change it's output render  
    var gateFiledContext = {}; 
    gateFiledContext.Templates = {}; 
    gateFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View
        "GATE_x0020_4_x0020_DUE_x0020_DAT": { 
        		"View": gateFiledTemplate
        		} , 
        "GATE_x0020_5_x0020_DUE_x0020_DAT": { 
        		"View": gateFiledTemplate
        		} ,
		"GATE_x0020_6_x0020_DUE_x0020_DAT": { 
				"View": gateFiledTemplate
				},  
		"GATE_x0020_7_x0020_DUE_x0020_DAT": { 
				"View": gateFiledTemplate
				}      									 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(gateFiledContext); 
 
})(); 
 
// This function provides the rendering logic for list view 
function gateFiledTemplate(ctx) { 
	var gateOrgin=ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var gate = ctx.CurrentItem[ctx.CurrentFieldSchema.Name+'.desc']; 
    if(gate!=""){
    	var value=parseInt(gate.split('/')[0]);
	    if(value==month+1){
	    	 return "<span style='background-color:pink;'>" + gate+ "</span>"; 
	    }
	    else if(value==month){
	    	return "<span style='background-color:yellow'>" + gate+ "</span>"; 
	    }
	    else if(value==month-1){
	    	return "<span style='background-color:green'>" + gate+ "</span>"; 
	    }else{
	    	return "<a href='"+gateOrgin+"'>" + gate+ "</a>"; ;
	    }
    } 
} 

效果

MSDN上面的Demo

https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!
O365开发日志 2019年12月27日

在O365开发过程中,会出现使用sharepointdesigner不能使用,同时在网页上编辑网页...O365开发日志

前言  SharePoint2019刚刚发布,很多群友在寻找安装教程,霖雨正好也下载了进行体...SharePoint2019图文安装教程

热门文章

Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1534 浏览量
利用JS实现的根据经纬度计算地球上两点之间的距离 在做地图导航的时候难免需要去计算两点距离,这个方法便是根据经纬度来计算两点的直线距离。浏览量:1...利用JS实现的根据经纬度计算地球上两点之间的距离 作者:Pastore Antonio
1399 浏览量
C# 两种方式实现Excel转DataTable 两种方式实现将Excel数据转DataTable,现成的东西看得懂,拿来用就行了:1、读取Exce...C#两种方式实现Excel转DataTable 作者:Pastore Antonio
1397 浏览量
vue 正则校验链接 1.<el-form:model="dataForm":rules="rules"r...vue正则校验链接 作者:Pastore Antonio
1383 浏览量
西游记之大圣归来 《西游记之大圣归来》是根据中国传统神话故事《西游记》进行拓展和演绎的3D动画电影。由横店影视、天空之城、燕城十月与微影时代作为出品方,高路动画、恭梓兄弟、世纪长龙、山东影视、东台龙行盛世、淮安西游产业与永康壹禾作为联合出品方出品,田晓鹏执导,张磊、林子杰、刘九容和童自荣等联袂配音。影片讲述了已于五行山下寂寞沉潜五百年的孙悟空被儿时的唐僧——俗名江流儿的小和尚误打误撞地解除了封印,在相互陪伴的冒险之旅中找回初心,完成自我救赎的故事。 作者:Pastore Antonio
1383 浏览量