问题描述
我正在寻求有关 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,"") + " - " + 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",batchCmd: "New",listName: "growVideoHits",//vidHit
valuepairs: [
["Title",TitleField]
],completefunc: function(xData,Status) {
//alert("Data Saved! and Please check your List");
}
});
}
我如何向 HTML 添加内容：我使用 REST API 获取选项来检测加载到 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,.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>');
解决方法
如果我很好地理解了您的代码，那么新项目是在 else part 中创建的，因此我建议您执行第一个循环以检测新视频中的旧视频并在之后创建 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,"") + " - " + 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');
}
});
});
另一个想法是按创建视频的日期对列表进行排序......