Как добавить JS Script для создания «Подробнее» в настраиваемом списке точек обмена?

Question

Мне нужно создать настраиваемый список sharepoint 2013 с расширяемой ссылкой read more.У меня нет опыта 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>