Fatal编程技术网
  • javascript/
  • Javascript 如何在SharePoint文件夹中加载新项目时使脚本灵活

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

javascript jquery sharepoint-2010

Javascript 如何在SharePoint文件夹中加载新项目时使脚本灵活,javascript,jquery,sharepoint-2010,restapi,spservices,Javascript,Jquery,Sharepoint 2010,Restapi,Spservices,我正在寻求有关JavaScript脚本的帮助，以便在将新项目（视频）添加到SharePoint文件夹时使其可扩展。我创建了一个计数器，每次选择“视频”按钮时计数，并在div中显示新计数。脚本按预期工作，但我希望扩展其功能，以便在将新视频添加到SharePoint视频文件夹时自动调整。视频在放入文件夹时会动态添加到HTML页面。但是，当我添加一个新视频时，它的加载到零索引位置，并将其他视频向下移动一个；使上一个视频从零索引位置变为一个位置，依此类推。有人能看一下我的剧本吗；如果可能，在加载新视频时

我正在寻求有关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页面：

$("#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 ol”）.append（”
  • 播放视频”+item.Name.replace（/\.-“+”+item.TimeCreated.split（'T'）[0]+'+'+item.Name.replace（/\.[^/]+$/，''）+“-”+item.TimeCreated.split（'T'）[0]+'
    视图：
    • ）；
    如果我已经很好地理解了您的代码，那么新项目将在
    其他部分中创建，因此我建议您执行第一个循环，从新视频中检测旧视频，并在以下步骤后创建html：
    

    getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
    $.each(data.d.results, function(index, 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);

        var newitems = [], olditems= [];
        if (spDate <= newTillDate) {
            olditems.push(item);
        } else {
            newitems.push(item);
        }

        var nbrolditems = olditems.length;
        for(let i = 0;i < nbrolditems; i++){
            let item = olditem[i];

            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");
        } 
        
        for(let j = 0;j < newitems.length; j++){
            let item = olditem[j;
            let i = j + nbrolditems;
            
            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');
        }
    });
});

    

    getFilesFromFolder（“/sites/dcsa/ep/epMainFiles/BI/video”）。完成（函数（数据）{
$。每个（数据d.结果、功能（索引、项目）{
var spDate=新日期（item.TimeCreated.split（'T'）[0]）//示例：“2015-10-30T05:00:00Z”
var newTillDate=新日期（）；
spDate.setDate（spDate.getDate（）+2）；
var newitems=[]，olditems=[]；

    if（spDate）我不知道添加新视频时代码的哪一部分会被检测到，以及在html代码中包含新视频的函数。你能精确吗？我更新了我的问题以显示如何将内容添加到html页面。在脚本中，请注意item.Name.replace（/\.^/]+$/，“”）部分。此调用从SharePoint文件夹中提取视频。因此，您知道您有一个日期为现在（每日日期）的新视频，以及视频的创建日期，所以最新的视频有最新的日期？你每次都会重建html，我的意思是完全使用所有名称的视频？你知道一种更好的方法来实现这个视频视图概念吗？目前它是行得通的。但是当我添加一个新视频时，我必须实际进入JavaScript并对我的项目重新编号。当视频是添加的，视频在第一个位置（零索引）而不是第二个位置（一个索引）。我必须根据编号的变化来更改为JavaScript。我想我可以用动态的方式来实现这一点

    getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
    $.each(data.d.results, function(index, 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);

        var newitems = [], olditems= [];
        if (spDate <= newTillDate) {
            olditems.push(item);
        } else {
            newitems.push(item);
        }

        var nbrolditems = olditems.length;
        for(let i = 0;i < nbrolditems; i++){
            let item = olditem[i];

            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");
        } 
        
        for(let j = 0;j < newitems.length; j++){
            let item = olditem[j;
            let i = j + nbrolditems;
            
            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');
        }
    });
});