zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    C++中的命名空间
    [3D数学基础:图形与游戏开发]专栏前言
    Step01-题目申报
    《通用型云端物联网网关系统的设计与实现》
    博弈论题目总结(一)——简单组合游戏
    单纯形模板
    BZOJ 3434 [WC2014]时空穿梭 (莫比乌斯反演)
    BZOJ 3533 [SDOI2014]向量集 (线段树维护凸包)
    BZOJ 2161 布娃娃 (主席树)
    UOJ #86 mx的组合数 (数位DP+NTT+原根优化)
  • 原文地址:https://www.cnblogs.com/jianyus/p/9111693.html
Copyright © 2011-2022 走看看