如何添加JS腳本以在自定義共享點列表中創建“閱讀更多”？

Question

我需要使用可擴展的閱讀更多鏈接創建一個sharepoint 2013定制列表。 我沒有JS經驗，想知道如何實現這樣的功能。 提前致謝

Answer 1

樣本JSLink供您參考。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        // 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) + " ...";
            }

            var el = '<div class="container">' +
              '<p data-toggle="collapse" data-target="#demo"><img src="" alt="Smiley face" width="42" height="42" align="left"> This is some text.</p>' +
              '<div id="demo" class="collapse">' +

              '</div>' +
            '</div>';
            return "<span title='" + bodyValue + "'>" + newBodyValue + "</span><span><a href='/Lists/Announcements/DispForm.aspx?ID=" + ctx.CurrentItem.ID+ "'>Read More...</a></span>";

        }
    </script>