如何在 SharePoint 文件夹中加载新项目时使脚本灵活

问：

我正在寻求有关我的 JavaScript 脚本的帮助，以便在将新项目（视频）添加到我的 SharePoint 文件夹时使其可扩展。我创建了一个计数器，每次选择视频按钮时都会计数，并在 div 中显示新的计数。该脚本按预期工作，但我喜欢扩展其功能，以便在将新视频添加到 SharePoint 视频文件夹时自动调整。将视频拖放到文件夹中时，会动态添加到 HTML 页面中。但是，当我添加一个新视频时，它会加载到零索引位置，并将其他视频向下移动一个;将上一个视频从零索引位置调整为一个位置，依此类推。有人可以查看我的脚本并查看吗？如果可能，在加载新视频时，我如何使当前的脚本进行相应的调整？我喜欢在添加新视频时不必回到脚本中并手动重新编号所有内容的地方。我希望这个问题是有道理的。

jQuery(document).on("click", "#column5", function() {

    videoHits();

    getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
        $.each(data.d.results, function(i, item) {

            var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
            var newTillDate = new Date();
            spDate.setDate(spDate.getDate() + 2);

            if (spDate <= newTillDate) {

                jQuery("#hiddenWrapper").fadeIn();

                $("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '"  style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span  style="text-align: center; font-size: 12px;  float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');


                $("#column1 h3").html("Videos");

            } else {

                jQuery("#hiddenWrapper").fadeIn();

                $("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '"  style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span  style="text-align: center; font-size: 12px;  float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');


                $("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');

            }
        });
    });

});




///Read hits from growVideoHits List

function videoHits() {
    jQuery(document).ready(function() {
        var chartData = getListData("growVideoHits"); //vidHit
        var data = [];
        for (var i = 0; i < chartData.length; i++) {
            data.push({
                "label": chartData[i].Title
            });
        }
        initChart(data);

    });

    function initChart(chartData) {

        //console.log(chartData);

        //Filter List Column for Specific Column Item
        var view0 = chartData.filter(function(d) {
            if (d["label"] == "Test Video") {
                return d;
            }
        })

        var view1 = chartData.filter(function(d) {
            if (d["label"] == "GROW HHM Guest Speaker") {
                return d;
            }
        })

        var view2 = chartData.filter(function(d) {
            if (d["label"] == "GROW Meeting 26 Aug 2020") {
                return d;
            }
        })


        var pageCount0 = view0.length;
        var pageCount1 = view1.length;
        var pageCount2 = view2.length;

        d3.select('#vidHit0 span').html(pageCount0);
        d3.select('#vidHit1 span').html(pageCount1);
        d3.select('#vidHit2 span').html(pageCount2);


    } //End of D3 function For Column Chart 


    function getListData(listName) {
        var results;
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title";
        $.ajax({
            url: requestUri,
            type: "GET",
            async: false,
            headers: {
                "ACCEPT": "application/json;odata=verbose"
            },
            success: function(data) {
                results = data.d.results;
            },
            error: function() {
                //alert("Failed to get details");                
            }
        });
        return results;
    }
}

////Play Buttons
jQuery(document).on("click", '[id^=growPlayPauseBtn]', function(e) {
    growBtn_Event(e);
});


function growBtn_Event(e) {

    if ($(e.target).attr("id") == 'growPlayPauseBtn0') {
        //alert('0');
        var title = "Test Video";
        AddListItem(title);
        videoClip0.play();
        jQuery("#growPlayPauseBtn0").html("Pause");
        jQuery("#growPlayPauseBtn0").fadeOut();
    }

    if ($(e.target).attr("id") == 'growPlayPauseBtn1') {
        //alert('1');
        var title = "GROW HHM Guest Speaker";
        AddListItem(title);
        videoClip1.play();
        jQuery("#growPlayPauseBtn1").html("Pause");
        jQuery("#growPlayPauseBtn1").fadeOut();
    }
    if ($(e.target).attr("id") == 'growPlayPauseBtn2') {
        /// alert('2');
        var title = "GROW Meeting 26 Aug 2020";
        AddListItem(title);
        videoClip2.play();
        jQuery("#growPlayPauseBtn2").html("Pause");
        jQuery("#growPlayPauseBtn2").fadeOut();
    }
   
}

function AddListItem(TitleField) {
    $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "New",
        listName: "growVideoHits", //vidHit
        valuepairs: [
            ["Title", TitleField]
        ],
        completefunc: function(xData, Status) {
            //alert("Data Saved! and Please check your List");
        }
    });
}

如何向 HTML 添加内容：我使用 REST API get 选项来检测加载到 SharePoint 文件夹中的新项目。

getFilesFromFolder("/sites/dcsa/ep/epMainFilesBI/video").done(function(data){

然后，我使用以下脚本将文件夹中的项目连接到 HTML 页面上：

$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn'+ i +'"  style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip'+ i +'"><source src="' +  item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - "  + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>'  + '</video><span  style="text-align: center; font-size: 12px;  float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "")  + " - "  + item.TimeCreated.split('T')[0]  + '</span></br><div class="vidViews" id="vidHit'+ i +'">Views: <span></span></div></li>');