顯示進度從SharePoint獲取列表中的項目時，列表

Question

現在我有一個從SharePoint列表獲取列表項

function getListItems(listTitle, queryText){ 
    var ctx = SP.ClientContext.get_current(); 
    var splist = ctx.get_web().get_lists().getByTitle(listTitle); 
    var camlQuery = new SP.CamlQuery(); 
    camlQuery.set_viewXml(queryText); 
    var listItems = splist.getItems(camlQuery); 

    ctx.load(listItems); 

    var d = $.Deferred(); 
    ctx.executeQueryAsync(function() { 
     var result = listItems.get_data().map(function(i){ 
      return i.get_fieldValues(); 
     }); 
     d.resolve(result); 
    }, 
    function(sender,args){ 
     d.reject(args); 
    }); 
    return d.promise(); 
} 

一個jQuery函數，然後我把這個功能

getListItems(listname , "").done(function(listItems){ 
     //do something here... 
}).fail(function(error){console.log(error.get_message());}); // Error message 

不過的一個列表包含相當多的記錄，我想向用戶顯示進度，以便他們知道發生了什麼。有沒有辦法只用客戶端腳本來做到這一點？任何幫助表示讚賞。謝謝。

Answer 1

使用所提供的示例中，由於請求被提交一次服務器，並沒有辦法來確定當前狀態的完整，你可以只顯示不確定進度條。

但由於的SharePoint JSOM API支持分頁數據檢索，你可以考慮下面的方法，使以確定當前狀態的完整，因此顯示定進度條。

function getPagedListItems(list, queryText,itemsCount,position){ 
    itemsCount = itemsCount || 100; 
    var ctx = SP.ClientContext.get_current(); 
    var list = ctx.get_web().get_lists().getByTitle(listTitle); 
    var ctx = list.get_context(); 
    var camlQuery = new SP.CamlQuery(); 
    if(typeof position != 'undefined') 
     camlQuery.set_listItemCollectionPosition(position); 
    var viewXml = String.format("<View>{0}<RowLimit>{1}</RowLimit></View>",queryText,itemsCount); 
    camlQuery.set_viewXml(viewXml); 
    var listItems = list.getItems(camlQuery); 
    ctx.load(list, 'ItemCount'); 
    ctx.load(listItems); 

    var d = $.Deferred(); 
    ctx.executeQueryAsync(function() { 
     d.resolve(listItems,list.get_itemCount()); 
    }, 
    function(sender,args){ 
     d.reject(args); 
    }); 
    return d.promise(); 
} 

function getListItems(listTitle, queryText,itemsCount,position,results){ 
    results = results || []; 
    return getPagedListItems(listTitle, queryText,itemsCount,position) 
    .then(function(pagedItems,totalItemCount){ 
     pagedItems.get_data().filter(function(i){ 
      results.push(i.get_fieldValues()); 
     }); 
     var percentLoaded = results.length/totalItemCount * 100; 
     console.log(String.format('{0}% has been loaded..',percentLoaded)); 
     var pos = pagedItems.get_listItemCollectionPosition(); 
     if(pos != null) { 
      return getListItems(listTitle, queryText,itemsCount,pos,results); 
     }  
     return results;  
    }); 
} 

用法

var listTitle = 'Contacts'; 
getListItems(listTitle , "",20) 
.done(function(results){ 
    console.log('Completed'); 
}) 
.fail(function(error){ 
    console.log(error.get_message()); 
}); 

結果

Answer 2

簡短的回答：你不能

由於您的查詢是作爲單個請求執行的，沒有辦法，以示「真實」的進展情況，雖然可以通過顯示一個通用的「加載」 GIF假的。

龍回答：你可以，如果你真的想

如果要修改您的查詢處尋呼（每個查詢行限制），然後執行每頁一個請求，直到所有記錄加載，那麼你可以更新頁面上顯示的進度。

// Use the RowLimit element to query for only 100 items at a time 
camlQuery.set_viewXml("<View>" 
    + "<OrderBy><FieldRef Name=\"Created\" /></OrderBy>" 
    + "<RowLimit>100</RowLimit>" 
    + "</View>"); 

現在的executeQueryAsync()的功能的onSuccess裏面，您可以訪問列表項目集合的listItemCollectionPosition財產並將其傳遞迴你的CAML查詢來獲取項目的下一個頁面。

var itemsCount = listItems.get_count(); 
// use itemCount to update the current progress as displayed to the user 

camlQuery.set_listItemCollectionPosition(listItems.get_listItemCollectionPosition()); 
// set the query's listItemCollectionPosition so you'll get the next page of results 

// reload the items with the updated query 
listItems = splist.getItems(camlQuery); 
ctx.load(listItems); 
ctx.executeQueryAsync(... // rinse and repeat to get the next batch of items 

顯然，這種方法會要求您重構代碼以允許任意數量的函數調用。你可能想將你的onSuccess函數分成一個命名函數而不是匿名函數，所以你可以遞歸地執行它。

重構代碼時，我還建議將整個代碼塊包裝到立即執行的函數表達式中，以便可以根據需要訪問變量而不會污染全局名稱空間。

(function(){ 
    //your code here 
})();