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 2013 WebPart 管理工具分享[开源] |
基于SharePoint 2013的论坛解决方案[开源] |
SharePoint 2013 学习基础系列入门教程 |
SharePoint 2013 图文开发系列之门教程 |
SharePoint Designer 学习系列入门教程 |
特:如果有SharePoint项目,欢迎邮件联系我,Email:linyu_s@163.com |
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
· 全程使用 AI 从 0 到 1 写了个小工具