Sharepoint 2013 列表使用JS Link

使用JS Link可以向Sharepoint List注册脚本,重写Field模板,使得对于符合条件的字段改变格式和样式。但是有一个问题是,页面postback的话,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

时间: 2024-12-18 09:21:39

Sharepoint 2013 列表使用JS Link的相关文章

Sharepoint 2013列表视图和字段权限扩展插件!

记得2014年春节期间,有博客园的网友通过QQ向我咨询Sharepoint 2013列表视图和字段权限扩展,因为之前他看到我博客介绍Sharepoint 2010列表视图和字段的权限控制扩展使用,问有没有这方面的列表权限扩展插件?我告诉他Sharepoint 2010的列表权限扩展插件并不能在Sharepoint 2013中使用,不能向上兼容的,且Sharepoint 2013的功能也有所升级了,系统底层架构已发生了一些变化.由于他需要在Sharepoint 2013项目中使用到此功能,有大量的

SharePoint 2013 列表关于大数据的测试

本文主要介绍SharePoint列表库的效率问题,一直以来以为阙值5k,超过会线性下降,需要分文件夹存放:或许这是之前版本的描述,但是2013版本通过测试,真心不是这么一回事儿. 下面,简单介绍下自己的测试过程: 1.创建一个测试列表,Data Test如下图: 2.创建控制台程序,添加插入数据代码,如下: 3.添加的代码: using (SPWeb web = site.OpenWeb()) { SPList list = web.Lists["Data Test"]; String

SharePoint 2013 列表多表联合查询

在SharePoint的企业应用中,遇到复杂的逻辑的时候,我们会需要多表查询:SharePoint和Sql数据表一样,也支持多表联合查询,但是不像Sql语句那样简单,需要使用SPQuery的Joins属性来完成. 下面,我们通过一个简单的例子,为大家演示一下如何使用SPQuery通过查阅项字段来进行两个列表的联合查询. 1.首先创建测试列表,City是城市,然后有一个列表叫做Address,是地址,通过查阅项Location进行关联,CityID字段是Number类型,这里代表城市的ID号: 创

SharePoint 2013 列表关于大数据的测试&lt;二&gt;

1.给测试列表添加查阅项字段,100个,代码如下: 2.插入测试数据的方法,注意查阅项字段的格式,代码如下: 3.插入10w条数据,时间花费如下(不建议List[LISTNAME].Items.Add,会比较慢): 4.查看列表设置,数据有10w条,阙值设置500w,如下图: 5.进入AllItems页面,发现查阅项字段数大于限制(8个),如下图: 6.修改查阅项限制数目(修改为500),如下图: 7.数据量10w,查阅项字段100个时的测试数据,如下表格: 表一:分页30,LookUp字段50

在SharePoint 2013 之中使用JS从Add-in程序中读取用户配置文件的属性

经过无数次的实验,只有这个程序可以运行正常 ,代码贴出来纯的JSOM,在我的实验环境老是返回未知错误,为了这一个简单的任务,我已经搞了2天了,不过终于搞出来了,使用各种方法后,还有使用代码. function GetUserInformation(loginName,propertyName) { $.ajax({ url: appweburl +"/_api/sp.userprofiles.peoplemanager" + "/getuserprofilepropertyf

SharePoint 2013无代码实现列表视图的时间段动态筛选

本文介绍两种为列表视图设置时间段筛选器的方法.其中,第一个方法用于SharePoint Server,第二个方法同时还能用于SharePoint Foundation. 方法一:日期筛选器Web部件 先看一下接下来要用的列表,是一个任务列表: 为了实验方便,我们先建个页面,用来放置目标列表视图和筛选器. 1.打开SPD,选择左侧的“网站页面”,点击功能区里的“新建”->"Web部件页". 如果是已有页面,则右键高级模式编辑. 2.找到页面主要区域的WebPart Zone,在其中

每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询

前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoint 自定义列表项添加callout菜单.希望能够给大家带来一些帮助. 1.  在aspx页引用可视化Web部件 有时候会需要在页面中引用项目中创建的可视化Web部件,具体步骤有以下这几步: 1) 在aspx页面顶部注册该可视化Web部件 示例如下: <%@ Register Tagprefix=&qu

SharePoint JS Link 之(一) 改变column的颜色

在SharePoint2013之前,想要修改列表项表单的样式,是一件非常痛苦的事情.一般来说,任何的列表都包含三种表单: 1.      新建列表项(new) 2.      编辑属性(edit properties) 3.      查看列表项(view properties) 除此之外,还有一种显示方法,就是在视图(view)显示,比如: 在SharePoint 2013里,新加了一个功能叫JSLink,有了它,不用写任何后台代码,只需要写JS就能修改列表项的显示了. 比如,我想修改Lang

SharePoint 2013 图文开发系列之代码定义列表

原文:SharePoint 2013 图文开发系列之代码定义列表 在SharePoint的开发中,用Visual Studio自定义列表是经常会用到的,因为很多时候,我们并不会手动创建列表,而手动创建列表在测试服务器和正式机之间同步字段,也很麻烦,所以我们经常用代码来定义列表或者文档库. 尤其在工作流的开发中,我们经常会用到代码定义任务列表,或者历史记录列表,用来存储我们需要存储的相关数据.而在Visual Studio 2013中,定义列表也提供了模板,通过模板创建,我们很容易就可以定义需要的