在SharePoint 2013中,SPField新增加了一个属性是JSLink,使用客户端脚本修改字段前台展示,我们可以用很多方法修改这个脚本的引用,然后来修改脚本,下面,我们举一个简单的例子。

具体过程

  A. 创建一个栏 -> B.使用工具修改JSLink的默认值 -> C.写JSLink的脚本

  1、在新列表,创建一个字段PicUrl,如下图:

  2、在layouts下新建一个文件夹,里面放JSLink.js(名字可以随便取);

  3、使用SharePoint Manager 2013,找到相应字段修改其JSLink属性,如下图:

  4、JSLink.js内容及介绍,如下图:

  重点就是下面的JS如何写,模板建议大家不要动,重写下面画圈的方法即可。注意方框部分里面是字段名称,不要写错,就可以。

  个人试想这里面还可以写复杂一点的脚本,但是没有试过,待以后需要的时候尝试一下,留个博客,方便以后查找,呵呵。

 1 // Create a namespace for our functions so we don't collide with anything else
2 var PicUrlReWrite= PicUrlReWrite|| {};
3
4 // Create a function for customizing the Field Rendering of our fields
5 PicUrlReWrite.CustomizeFieldRendering = function ()
6 {
7 var fieldJsLinkOverride = {};
8 fieldJsLinkOverride.Templates = {};
9 fieldJsLinkOverride.Templates.Fields =
10 {
11 // Make sure the Priority field view gets hooked up to the GetPriorityFieldIcon method defined below
12 'PicUrl': { 'View': PicUrlReWrite.ReWriteFieldValue }
13 };
14
15 // Register the rendering template
16 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);
17 };
18
19 // Create a function for getting the Priority Field Icon value (called from the first method)
20 PicUrlReWrite.ReWriteFieldValue = function (ctx) {
21 var PicUrl = ctx.CurrentItem.PicUrl;
22
23 // In the following section we simply determine what the rendered html output should be. In my case I'm setting an icon.
24
25 return "<img src='"+ PicUrl +"' width='700' height='300'></img>";
26
27 };
28
29 // Call the function.
30
31 // We could've used a self-executing function as well but I think this simplifies the example
32
33 PicUrlReWrite.CustomizeFieldRendering();

  5、新建一条数据,如下图所示:

  6、默认展示效果,如下图:

  7、查看修改JSLink后展示,如下图:

  本文是参考如下博客做的测试,测试过程中遇到点问题,想了很久又查了资料,才发现js应该怎么写,所以拿出来说一下,如有需要,参考后面链接。

  附链接

  http://blog.csdn.net/abrahamcheng/article/details/12090265

SharePoint 2013 字段属性之JSLink 转载来源(http://www.cnblogs.com/jianyus/p/3544482.html)的更多相关文章

  1. SharePoint 2013 字段属性之JSLink

    在SharePoint 2013中,SPField新增加了一个属性是JSLink,使用客户端脚本修改字段前台展示,我们可以用很多方法修改这个脚本的引用,然后来修改脚本,下面,我们举一个简单的例子. 具 ...

  2. SharePoint 入门书籍推荐 转载来源http://www.cnblogs.com/jianyus/p/3513238.html

    最近,总有人说刚入门SharePoint,没有好的资料或者电子书,资料推荐大家多看看博客园和CSDN的博客.对于看博客,我一般是两个思路,要么找一个人的从头到尾看一遍,觉得有意义的,就把地址加收藏:或 ...

  3. Visual Studio 2013 新增web项目IIS Express的64位版   转载来源http://www.cnblogs.com/jianyus/p/3524335.html

    使用Visual Studio 2012开发SharePoint的应该都遇到过下面的错误“SharePoint 在32位进程中不受支持”,而怎么修改目标平台都不好使,因为VS 2012所配备的IIS ...

  4. 浅谈SharePoint 2013 站点模板开发 转载自http://www.cnblogs.com/jianyus/p/3511550.html

    一直以来所接触的SharePoint开发,都是Designer配合Visual Studio,前者设计页面,后者开发功能,相互合作,完成SharePoint网站开发.直到SharePoint 2013 ...

  5. SharePoint 2013 WebPart属性面板配置

    为WebPart添加右侧的属性面板,方便将来对于WebPart的配置,我们只需要在CustomWebPart.cs文件里面,声明一下变量即可: private string url = string. ...

  6. SharePoint 2013 调用WCF服务简单示例

    内容比较简单,主要记录自己使用SharePoint 2013WCF服务遇到的小问题和小经验,分享给大家,希望能够给需要的人有所帮助.好吧,进入正题! 第一部分 SharePoint 2013调用自带W ...

  7. SharePoint 2013 图文开发系列之列表定义高级篇

    转载自  http://www.cnblogs.com/jianyus/p/3484714.html SharePoint列表库,是我们使用过程中最常用的库,下面,我们简单介绍下代码定义自定义列表,主 ...

  8. SharePoint 2013 自定义扩展菜单(二)

    接博文<SharePoint 2013 自定义扩展菜单>,多加了几个例子,方便大家理解. 例七 列表设置菜单扩展(listedit.aspx) 扩展效果 XML描述 <CustomA ...

  9. Sharepoint 2013列表视图和字段权限扩展插件(免费下载)!

    记得2014年春节期间,有博客园的网友通过QQ向我咨询Sharepoint 2013列表视图和字段权限扩展,因为之前他看到我博客介绍Sharepoint 2010列表视图和字段的权限控制扩展使用,问有 ...

随机推荐

  1. 移动端 web开发心得

    吐槽:华为p9 内置浏览器就是个渣,各种奇葩的bug,1.如果将一个输入框的最大长度设为4,然后输入4个后,js将输入的值置空,就无法再输入了 手机上浏览器比较蛋疼的是,点击一个输入框,输入法将页面挡 ...

  2. Thymeleaf 3与Spring MVC 4 整合配置

    Thymeleaf 3与Spring MVC 4 整合配置 Maven 依赖配置 Spring 相关依赖就不说了 <dependency> <groupId>org.thyme ...

  3. could not resolve property问题(ssh框架)

    could not resolve property不能解析属性问题, 刚开始把hql语句中的"from User user where user.user_name = '"+u ...

  4. Linq——Count、Sum、Min、Max、Average

    using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; us ...

  5. 递归——CPS(一)

    程序中为什么需要栈stack? 普通的程序中,接触到子程序和函数的概念,很直观地,调用子程序时,会首先停止当前做的事情,转而执行被调用的子程序,等子程序执行完成后,再捡起之前挂起的程序,这有可能会使用 ...

  6. jsp中获取json字符串,并解析

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. Linux常用命令汇总及使用方法(一)

    最近开始学习Linux,但是因为原来没有接触过,所有现在先将Linux中常用的命令记录下来,方便自己后期使用. 1.登陆 通过secureCRT/xshell/ssh等软件远程登陆Linux (1)# ...

  8. python安装pip

    pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 1.pip下载安装 1.1 pip下载 # wget "https://pypi.p ...

  9. xss框架的一些想法

    今天pybeef作为一个课程设计答辩完成了,向老师介绍了很多xss利用相关的场景和技术. 先说一下已经实现了什么, 1, 浏览器版本的判断 这方面只能判断IE和firefox 火狐判断只判断了user ...

  10. phpQuery 无法解析 html 结构

    有时候解析一段 HTML 代码时 phpQuery 无法解析原因: 可能是缺少类似下面的 meta 信息,在带解析的字符串任意位置添上即可 : <meta http-equiv="Co ...