前言

  最近有这么个需求,用户希望在所有项目视图显示多行文本字段,然后,又不希望显示的过场,也就是处理一下长度。

  一开始就想到用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 列表视图修改多行文本字段显示长度的更多相关文章

  1. Dynamic 中修改实体中主字段的长度

    select EntityId,* from MetadataSchema.Entity where Name='dji_incidentaddress' SELECT TOP 100 [Attrib ...

  2. EF中限制字段显示长度

    在EF中有些添加的字段 文本显示超多文字,想截取显示又没有截取功能. 怎么办? 我们可以在EF中类的属性中设置 你想限制这个用户名只能有10个字符长度 public String UserName { ...

  3. GridView1_RowDataBound解决限制字段显示长度用"..."显示ToolTip

    ToolTip: // // 摘要: // 获取或设置当鼠标指针悬停在 Web 服务器控件上时显示的文本. // // 返回结果: // 当鼠标指针悬停在 Web 服务器控件上时显示的文本.默认值为 ...

  4. SharePoint 列表权限控制

    一提到sharepoint 我相信权限控制一定会是一个很重要的话题,尤其是对列表的权限控制,创建.修改.查看权限.其实网上这方面的资料已经很多了,尤其是以下2篇文章,后来索性把CodeArt_Perm ...

  5. 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 ...

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

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

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

    本文介绍两种为列表视图设置时间段筛选器的方法.其中,第一个方法用于SharePoint Server,第二个方法同时还能用于SharePoint Foundation. 方法一:日期筛选器Web部件 ...

  8. SharePoint 多行文本字段设置默认值

    前言 最近有这样一个需求,创建一个表单,里面有多行文本字段,但是要求内容默认带一个表格,这样用户新建项目的时候,就可以直接填表格了. 好吧,这样的需求我们可以通过JavaScript实现. 1.默认的 ...

  9. 修改sharepoint列表样式

    1.将sharepoint 的样式修改为阴影 2.用designer打开列表的AllItems.aspx文件,将下面的样式拷贝到里面     <style type="text/css ...

随机推荐

  1. .NetCore利用Swagger生成 XML文档需要注意生成路径的地址

    发布的时候如果用 release dotnet publish --configuration release dotnet publish 默认都是debug 会出现 XML丢失问题,其实可以看下工 ...

  2. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  3. 【Java】 大话数据结构(12) 查找算法(3) (平衡二叉树(AVL树))

    本文根据<大话数据结构>一书及网络资料,实现了Java版的平衡二叉树(AVL树). 平衡二叉树介绍 在上篇博客中所实现的二叉排序树(二叉搜索树),其查找性能取决于二叉排序树的形状,当二叉排 ...

  4. Python学习笔记之爬取网页保存到本地文件

     爬虫的操作步骤: 爬虫三步走 爬虫第一步:使用requests获得数据: (request库需要提前安装,通过pip方式,参考之前的博文) 1.导入requests 2.使用requests.get ...

  5. miniblink+golang开发windows gui应用

    golang的优点自不必说了,这么好的语言怎么能缺少界面库呢?所以我使用miniblink开发了一个可以用html,css,js开发界面的浏览器,通过它你能为你的golang开发简单的界面.说白了其实 ...

  6. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  7. python面向对象魔术方法补充

    一.描述符 在 面向对象 编程中 定义一个(没有定义方法)类:class person , 在这个类里面,有name,age, heigth, weight,等等属性, 这个类就可以看作一个对 per ...

  8. Javascript 严格模式use strict详解

    1.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...

  9. 2013-2014 ACM-ICPC, NEERC, Southern Subregional Contest Problem B. Travelling Camera Problem set贪心

    Problem B. Travelling Camera Problem 题目连接: http://www.codeforces.com/gym/100253 Description Programm ...

  10. FireDAC 下的 Sqlite [11] - 关于批量提交 SQL 命令的测试

    可把下面代码直接贴在空白窗体上, 以快速完成窗体设计: object DBGrid1: TDBGrid Left = 0 Top = 0 Width = 265 Height = 338 Align ...