在 SharePoint 文件夹中加载新项目时如何使脚本灵活
How to Make Script Flexible when New Item is Loaded in SharePoint Folder
我正在寻求有关我的 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 获取选项来检测加载到 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>');
如果我很好地理解了您的代码，新项目将在 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, 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');
}
});
});
另一个想法是按视频创建日期对列表进行排序....
我正在寻求有关我的 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 获取选项来检测加载到 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>');
如果我很好地理解了您的代码，新项目将在 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, 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');
}
});
});
另一个想法是按视频创建日期对列表进行排序....