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

  一开始就想到用js的方式去处理,偶然间发现还可以用jslink,尝试了一下,非常好用,分享给大家。

  完整代码

SharePoint 列表视图修改多行文本字段显示长度
// 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>";             } 
SharePoint 列表视图修改多行文本字段显示长度

  后来,用户又希望鼠标点击缩略文档的时候,能显示所有内容,天啊,满足客户需求,毕竟,客户就是上帝!!!

  简单的改了一下默认脚本的return的值,如下:

return "<div onclick='changeShow(this)'><span style='display:none;'>" + bodyValue + "</span><span style='display:block;'>" + newBodyValue + "</span></div>";

然后,再加一个切换效果的脚本,如下:

SharePoint 列表视图修改多行文本字段显示长度
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";      }  }
SharePoint 列表视图修改多行文本字段显示长度

  这样,就满足用户单击可以切换缩略文本和完整文本的功了。

  运行效果

SharePoint 列表视图修改多行文本字段显示长度

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注