SharePoint 列表视图修改多行文本字段显示长度
前言
最近有这么个需求,用户希望在所有项目视图显示多行文本字段,然后,又不希望显示的过场,也就是处理一下长度。
一开始就想到用js的方式去处理,偶然间发现还可以用jslink,尝试了一下,非常好用,分享给大家。
完整代码
// List View - Substring Long String Sample
// Muawiyah Shannak , @MuShannak (function () { // Create object that have the context information about the field that we want to change it's output render
var bodyFiledContext = {};
bodyFiledContext.Templates = {};
bodyFiledContext.Templates.Fields = {
// Apply the new rendering for Body field on list view
"Body": { "View": bodyFiledTemplate }
}; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(bodyFiledContext); })(); // This function provides the rendering logic
function bodyFiledTemplate(ctx) { var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; //This regex expression use to delete html tags from the Body field
var regex = /(<([^>]+)>)/ig; bodyValue = bodyValue.replace(regex, ""); var newBodyValue = bodyValue; if (bodyValue && bodyValue.length >= 100)
{
newBodyValue = bodyValue.substring(0, 100) + " ...";
} return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>"; }
后来,用户又希望鼠标点击缩略文档的时候,能显示所有内容,天啊,满足客户需求,毕竟,客户就是上帝!!!
简单的改了一下默认脚本的return的值,如下:
return "<div onclick='changeShow(this)'><span style='display:none;'>" + bodyValue + "</span><span style='display:block;'>" + newBodyValue + "</span></div>";
然后,再加一个切换效果的脚本,如下:
function changeShow(obj)
{ var spans = $(obj).find("span");
if(spans[0].style.display == "none")
{
spans[0].style.display = "block";
spans[1].style.display = "none";
}
else
{
spans[0].style.display = "none";
spans[1].style.display = "block";
}
}
这样,就满足用户单击可以切换缩略文本和完整文本的功了。
运行效果

附参考链接 https://code.msdn.microsoft.com/office/Client-side-rendering-code-93e7077d
SharePoint 列表视图修改多行文本字段显示长度的更多相关文章
- Dynamic 中修改实体中主字段的长度
select EntityId,* from MetadataSchema.Entity where Name='dji_incidentaddress' SELECT TOP 100 [Attrib ...
- EF中限制字段显示长度
在EF中有些添加的字段 文本显示超多文字,想截取显示又没有截取功能. 怎么办? 我们可以在EF中类的属性中设置 你想限制这个用户名只能有10个字符长度 public String UserName { ...
- GridView1_RowDataBound解决限制字段显示长度用"..."显示ToolTip
ToolTip: // // 摘要: // 获取或设置当鼠标指针悬停在 Web 服务器控件上时显示的文本. // // 返回结果: // 当鼠标指针悬停在 Web 服务器控件上时显示的文本.默认值为 ...
- SharePoint 列表权限控制
一提到sharepoint 我相信权限控制一定会是一个很重要的话题,尤其是对列表的权限控制,创建.修改.查看权限.其实网上这方面的资料已经很多了,尤其是以下2篇文章,后来索性把CodeArt_Perm ...
- Display a Detail View with a List View 主子视图-列表视图与详细信息视图同时显示
In this lesson, you will learn how to display a Detail View together with a List View. For this purp ...
- Sharepoint 2013列表视图和字段权限扩展插件(免费下载)!
记得2014年春节期间,有博客园的网友通过QQ向我咨询Sharepoint 2013列表视图和字段权限扩展,因为之前他看到我博客介绍Sharepoint 2010列表视图和字段的权限控制扩展使用,问有 ...
- SharePoint 2013无代码实现列表视图的时间段动态筛选
本文介绍两种为列表视图设置时间段筛选器的方法.其中,第一个方法用于SharePoint Server,第二个方法同时还能用于SharePoint Foundation. 方法一:日期筛选器Web部件 ...
- SharePoint 多行文本字段设置默认值
前言 最近有这样一个需求,创建一个表单,里面有多行文本字段,但是要求内容默认带一个表格,这样用户新建项目的时候,就可以直接填表格了. 好吧,这样的需求我们可以通过JavaScript实现. 1.默认的 ...
- 修改sharepoint列表样式
1.将sharepoint 的样式修改为阴影 2.用designer打开列表的AllItems.aspx文件,将下面的样式拷贝到里面 <style type="text/css ...
随机推荐
- fullcalendar插件日程管理
日程管理-fullcalendar插件用法 前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和 ...
- NET Core中使用Angular2的Token base身份认证
下载本文提到的完整代码示例请访问:How to authorization Angular 2 app with asp.net core web api 在ASP.NET Core中使用Angula ...
- windows下安装mysql8.0压缩版
下面总结下安装过程: 首先解压下载好的压缩版本. 将解压后mysql的bin文件目录配置系统环境path变量中 使用cmd打开命令窗口,输入mysqld --initialize命令初始化 ...
- js跨越请求的2中实现 JSONP /后端接口设置运行跨越header
由于浏览器同源策略,a域名的js向b域名ajax请求会被禁止.JS实现跨越访问接口有2中办法. 1.后端接口设置允许跨越的header头. //header('Access-Control-Allow ...
- 基于jquery的简洁树形折叠菜单
先上效果图: 最小的ul就是一个最小的树枝,空间允许时可无限扩展.html如下: <div class="panel panel-default"> <div c ...
- MyBatis 从浅入深 随笔整理
MyBatis? archetypeCatalog = internal 本文档单独出现的_parameter都标识为变量名 一.三个基本要素: 核心接口和类 MyBatis 核心配置文件 SQL映射 ...
- 如何处理C++构造函数中的错误——兼谈不同语言的错误处理
用C++写代码的时候总是避免不了处理错误,一般来说有两种方式,通过函数的返回值或者抛出异常.C语言的错误处理一律是通过函数的返回值来判断的,一般是返回0.NULL或者-1表示错误,或者直接返回错误代码 ...
- Redis和数据库 数据同步问题
Redis和数据库同步问题 缓存充当数据库 比如说Session这种访问非常频繁的数据,就适合采用这种方案:当然了,既然没有涉及到数据库,那么也就不会存在一致性问题: 缓存充当数据库热点缓存 读操作 ...
- Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) D. Artsem and Saunders 数学 构造
D. Artsem and Saunders 题目连接: http://codeforces.com/contest/765/problem/D Description Artsem has a fr ...
- [原创]浅谈H5页面性能优化方法
[原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...