Twitter bootstrap 提示输入for循环中的每个项目
在页面加载时，我尝试使用下面的JavaScript函数查看SharePoint列表，以查看是否存在当前用户作为经理的任何请求，如果存在，则允许他们批准或拒绝这些请求Twitter bootstrap 提示输入for循环中的每个项目,twitter-bootstrap,sharepoint,bootstrap-modal,csom,sharepoint-online,Twitter Bootstrap,Sharepoint,Bootstrap Modal,Csom,Sharepoint Online,在页面加载时，我尝试使用下面的JavaScript函数查看SharePoint列表，以查看是否存在当前用户作为经理的任何请求，如果存在，则允许他们批准或拒绝这些请求 //Logic to approve events if the current user is a manager. function promptToApproveEvents(){ var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostU
//Logic to approve events if the current user is a manager.
function promptToApproveEvents(){
var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var hostContext = new SP.AppContextSite(currentContext, hostUrl);
var hostweb = hostContext.get_web();
var list = hostweb.get_lists().getByTitle(paidTimeOffListName);
//A caml query to get records where manager is equal to current user.
var queryXml = "<View><Query><Where><Eq><FieldRef Name='Manager' /><Value Type='Integer'><UserID /></Value></Eq></Where></Query></View>"
var query = new SP.CamlQuery();
query.set_viewXml(queryXml);
var items = list.getItems(query);
currentContext.load(items);
currentContext.executeQueryAsync(
function() //on success.
{
for(var i = 0;i < items.get_count();i++) {
var item = items.getItemAtIndex(i);
//Is the item we're looking at in need of approval?
if (item.get_item("Approved") === false)
{
//Yes, prompt for approval.
//$('#approvalModal').modal('show'); //modals don't seem to work in loops.
confirm("here's something in need of approval.");
}
else
{
//No, do nothing.
alert("skip it, it doesn't need approved.");
}
}
},
function(sender,args){
alert("Failed to get manager's name. Make sure your Organization Contacts list is filled out! Error: " + args.get_message()); //On fail
});
}
关于我应该采取什么方法有什么建议吗？因为引导上的模式调用是异步的，所以您需要对异步调用流进行一些控制。这可以手动完成，但通常是一个巨大的头痛（至少对我来说） 有一些库（如q、async等）可以实现这一点。但我还是推荐，因为它是一种更容易理解和开始使用的工具 对于你的情况，你可能会使用 使用以下代码段代替for循环：
async.eachSeries(items, function( item, callback) {
//Is the item we're looking at in need of approval?
if (item.get_item("Approved") === false)
{
//Yes, prompt for approval.
//$('#approvalModal').modal('show'); //modals don't seem to work in loops.
confirm("here's something in need of approval.", callback);
}
else
{
//No, do nothing.
alert("skip it, it doesn't need approved.");
}
});
您还需要使
confirmcallbackasyncconfirm//Recursive function that behaves like a for loop, stepping through all items and finding ones needing approval.
function recursiveCheckRequests(i) {
var item = items.getItemAtIndex(i);
//Is the item we're looking at in need of approval?
if (item.get_item("_ModerationStatus") === 2) {
//Yes, prompt for approval. (code for prompt goes here.)
//Fetch info about the request to be displayed in the dialog box.
var title = item.get_item('Title');
var location = item.get_item('Location');
var description = item.get_item('Description');
var requester = item.get_item('Requester').get_lookupValue();
var start = item.get_item('EventDate').toString("h:mm tt, dddd, MMMM d, yyyy"); //formatting the datetime
var end = item.get_item('EndDate').toString("h:mm tt, dddd, MMMM d, yyyy"); //formatting the datetime
//Generate a nicely formatted message using this crazy-looking string of HTML
var html="<p>We've found a pending request from a person you manage.</p>"
html +="<p>Would you like to approve this request? </p>"
html +="<br/>"
html +="<div class=\"form-horizontal\"><!-- Start of form !-->"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Requester</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p style=\"text-align:left\" class=\"form-control-static\">" + requester + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Title</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + title + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Location</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + location + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Start</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + start + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">End</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + end + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Description</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + description + "</p>"
html +=" </div>"
html +=" </div>"
html +="</div> <!-- End of Form !-->"
bootbox.dialog({
message: html,
title: "A pending request needs your verdict!",
buttons: {
approve: {
label: "Approve",
className: "btn-success",
callback: function() {
//Set it to approved.
item.set_item("_ModerationStatus", 0);
item.update();
currentContext.load(item);
currentContext.executeQueryAsync(
function(){
bootbox.dialog({
title: "Request Approved.",
message: "This request has been approved.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
},
function(sender, args){
bootbox.dialog({
title: "Something went wrong!",
message: "We failed to approve the request! Here's what we know about the problem: " + args.get_message() + '\n' + args.get_stackTrace(),
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
});
function callback(){
//Go on to next in list when we've received a reponse.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
},
reject: {
label: "Reject",
className: "btn-danger",
callback: function() {
//Set it to rejected.
item.set_item("_ModerationStatus", 1);
item.update();
currentContext.load(item);
currentContext.executeQueryAsync(
function(){
bootbox.dialog({
title: "Request Rejected.",
message: "This request has been rejected.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
},
function(sender, args){
bootbox.dialog({
title: "Something went wrong!",
message: "We failed to reject the request! Here's what we know about the problem: " + args.get_message() + '\n' + args.get_stackTrace(),
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
});
function callback(){
//Go on to next in list when we've received a reponse.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
},
Main: {
label: "Skip",
className: "btn-default",
callback: function() {
//Leave it as pending, which is equivalent to the line below
//item.set_item("_ModerationStatus", 2);
//Go on to next in list since we don't require a reponse.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
}
});
}
else
{
//bootbox.alert("This request isn't pending.");
//Go on to next in list since this one doesn't need a response.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
//Start the recursive function seen above.
recursiveCheckRequests(0);
//递归函数，其行为类似于for循环，遍历所有项目并查找需要批准的项目。
函数递归检查请求（i）{
var item=items.getItemAtIndex（i）；
//我们正在查看的项目是否需要批准？
if（item.get_item（“_-ModerationStatus”）==2）{
//是，提示批准。（此处显示提示代码。）
//获取有关要在对话框中显示的请求的信息。
var title=item.get_item（'title'）；
var location=item.get_item（'location'）；
var description=item.get_item（'description'）；
var requester=item.get_item（'requester'）.get_lookupValue（）；
var start=item.get_item（'EventDate'）.toString（“h:mm tt，dddddd，MMMM d，yyyy”）；//格式化日期时间
var end=item.get_item（'EndDate'）.toString（“h:mm tt，dddd，MMMM d，yyyy”）；//格式化日期时间
//使用这个看起来疯狂的HTML字符串生成一个格式很好的消息
var html=“我们发现您管理的人提出了一个未决请求。”
html+=“是否批准此请求？”
html+=“
”
html+=“”
html+=“”
html+=“请求者”
html+=“”
html+=“”+请求者+“
”
html+=“”
html+=“”
html+=“”
html+=“标题”
html+=“”
html+=“”+标题+“
”
html+=“”
html+=“”
html+=“”
html+=“位置”
html+=“”
html+=“”+位置+“
”
html+=“”
html+=“”
html+=“”
html+=“开始”
html+=“”
html+=“”+开始+“
”
html+=“”
html+=“”
html+=“”
html+=“结束”
html+=“”
html+=““+end+”
”
html+=“”
html+=“”
html+=“”
html+=“说明”
html+=“”
html+=“”+说明+“
”
html+=“”
html+=“”
html+=“”
bootbox.dialog({
信息：html，
标题：“未决请求需要您的裁决！”，
按钮：{
批准：{
标签：“批准”，
类名：“btn成功”，
回调：函数（）{
//将其设置为“已批准”。
项目。设置项目（“\u适度状态”，0）；
item.update（）；
currentContext.load（项）；
//Recursive function that behaves like a for loop, stepping through all items and finding ones needing approval.
function recursiveCheckRequests(i) {
var item = items.getItemAtIndex(i);
//Is the item we're looking at in need of approval?
if (item.get_item("_ModerationStatus") === 2) {
//Yes, prompt for approval. (code for prompt goes here.)
//Fetch info about the request to be displayed in the dialog box.
var title = item.get_item('Title');
var location = item.get_item('Location');
var description = item.get_item('Description');
var requester = item.get_item('Requester').get_lookupValue();
var start = item.get_item('EventDate').toString("h:mm tt, dddd, MMMM d, yyyy"); //formatting the datetime
var end = item.get_item('EndDate').toString("h:mm tt, dddd, MMMM d, yyyy"); //formatting the datetime
//Generate a nicely formatted message using this crazy-looking string of HTML
var html="<p>We've found a pending request from a person you manage.</p>"
html +="<p>Would you like to approve this request? </p>"
html +="<br/>"
html +="<div class=\"form-horizontal\"><!-- Start of form !-->"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Requester</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p style=\"text-align:left\" class=\"form-control-static\">" + requester + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Title</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + title + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Location</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + location + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Start</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + start + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">End</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + end + "</p>"
html +=" </div>"
html +=" </div>"
html +=" <div class=\"form-group\">"
html +=" <label class=\"col-sm-4 control-label\">Description</label>"
html +=" <div class=\"col-sm-7\">"
html +=" <p type=\"text-align:left\" class=\"form-control-static\">" + description + "</p>"
html +=" </div>"
html +=" </div>"
html +="</div> <!-- End of Form !-->"
bootbox.dialog({
message: html,
title: "A pending request needs your verdict!",
buttons: {
approve: {
label: "Approve",
className: "btn-success",
callback: function() {
//Set it to approved.
item.set_item("_ModerationStatus", 0);
item.update();
currentContext.load(item);
currentContext.executeQueryAsync(
function(){
bootbox.dialog({
title: "Request Approved.",
message: "This request has been approved.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
},
function(sender, args){
bootbox.dialog({
title: "Something went wrong!",
message: "We failed to approve the request! Here's what we know about the problem: " + args.get_message() + '\n' + args.get_stackTrace(),
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
});
function callback(){
//Go on to next in list when we've received a reponse.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
},
reject: {
label: "Reject",
className: "btn-danger",
callback: function() {
//Set it to rejected.
item.set_item("_ModerationStatus", 1);
item.update();
currentContext.load(item);
currentContext.executeQueryAsync(
function(){
bootbox.dialog({
title: "Request Rejected.",
message: "This request has been rejected.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
},
function(sender, args){
bootbox.dialog({
title: "Something went wrong!",
message: "We failed to reject the request! Here's what we know about the problem: " + args.get_message() + '\n' + args.get_stackTrace(),
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
});
function callback(){
//Go on to next in list when we've received a reponse.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
},
Main: {
label: "Skip",
className: "btn-default",
callback: function() {
//Leave it as pending, which is equivalent to the line below
//item.set_item("_ModerationStatus", 2);
//Go on to next in list since we don't require a reponse.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
}
});
}
else
{
//bootbox.alert("This request isn't pending.");
//Go on to next in list since this one doesn't need a response.
if (i + 1 < items.get_count()) {
recursiveCheckRequests(i + 1);
}
}
}
//Start the recursive function seen above.
recursiveCheckRequests(0);