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

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 οnclick='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

posted @ 2018-05-31 10:15 霖雨 阅读( ...) 评论( ...) 编辑 收藏
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霖雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值