SharePoint 2010 JavaScript Object Model中executeQueryAsync的递归调用

最近一客户需求在页面上显示某Picture Library里面的客户信息，而且这些客户信息是按照文件夹分组存放。因为呈现样式是按照客户的设计样式显示，为简单起见直接使用JavaScript Object Model。

1）首先是获取指定父文件夹下面所有子文件夹。

<style type="text/css">
#contactUs 
{
	padding: 0;
	margin: 20px 0 0 0;
}
#contactUsMain
{
	padding: 0;
	margin: 20px 0 0 0;
}
#contactUsMain ul
{
	list-style-type: none;
	padding: 0!important;
	margin: 0!important;
}
#contactUsMain li
{
	background-image: none!important;
	padding: 0!important;
	margin: 0 35px 20px 0!important;
	width: 305px;
	height: 75px;
	display: inline;
	float: left;
}
.contactUsImg
{
	float: left;
	width: 100px;
}
.contactUsContent
{
	float: left;
	width: 205px;
}
</style>

<div id="contactUs">
    <h1>Contact Us</h1>
    <div id="contactUsMain">
    </div>
</div>

<script type="text/javascript">

// registry the SharePoint client object model script
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

var clientContext;
var oList;
var parentFolderUrl;
var teamName;

var subFolderUrls;
var teamNames;

var nCount;

var LIST_TITLE = "Contact Us";
var LIST_RELATIVE_URL = "ContactUs";

获取指定文件夹下面所有的文件夹名称，这个作为后面获取子文件夹内所有item使用。注意获取指定文件夹内item的参数是 set_folderServerRelativeUrl（文件夹相对路径）。

function retrieveListItems() 
{
	//debugger;
	
    //var clientContext = new SP.ClientContext(siteUrl);
    clientContext = new SP.ClientContext.get_current();
    oList = clientContext.get_web().get_lists().getByTitle(LIST_TITLE);
        
    // Retrieve sub-folders by specified parent folder
    
    // The page main heading will be the name of parent folder
    var heading = document.getElementById("pageMainHeading");
    if (typeof(heading) == undefined && trim(heading.innerText == ""))
        return;
    
    teamNames = new Array();
    subFolderUrls = new Array();
    
    // Caml query for retrieve all items
    //var camlQuery = SP.CamlQuery.createAllItemsQuery();
    
    // Caml query for retrieve all sub folder by specified parent folder
    var camlQuery = SP.CamlQuery.createAllFoldersQuery();
    
    // Make sure the folder relative URL is like "ContactUs/New Business"
    parentFolderUrl = LIST_RELATIVE_URL + "/" + trim(heading.innerText);
    camlQuery.set_folderServerRelativeUrl(parentFolderUrl);
    
    this.collFolderItems = oList.getItems(camlQuery);
    
    clientContext.load(collFolderItems);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySuccess), Function.createDelegate(this, this.onQueryFailed));
}

2）递归调用excuteQueryAsync

这里花了不少时间，因为之前一直在while循环内去调用excuteQueryAsync的回调函数，因为回调函数都是异步调用的，结果是总是只能拿到最后一个文件夹里面的内容，而前面的都会报异常。

后来把这个改成递归来调用，一切正常。

function onQuerySuccess() 
{	
	//debugger;
    
    var listEnumerator = collFolderItems.getEnumerator();
    while (listEnumerator.moveNext()) 
    {
        var currentItem = listEnumerator.get_current();
        
        // 1: folder; 0: file;
        if(currentItem.get_fileSystemObjectType() == '1') 
        {
            // Folder name as the team name           
            teamName = currentItem.get_fieldValues('Title').FileLeafRef;
            
            teamNames.push(teamName);
            subFolderUrls.push(parentFolderUrl + "/" + teamName);
            
            // The query async callback function cannot multiple run in the while loop or for loop, it will fail 
            // Here using the recursion to handle this situation
            
            /*
            var camlQuery= new SP.CamlQuery();
            camlQuery.set_folderServerRelativeUrl(folderRelativeUrl + "/" + teamName); 
            camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Order0' /></OrderBy></Query></View>"); 
                   
            this.collListItems = oList.getItems(camlQuery);        
            
            clientContext.load(collListItems);
            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryFolder), Function.createDelegate(this, this.onQueryFailed));        
            */
        }
    }
    
    // Use recursion to handle query async callback function
    
    nCount = 0;
    
    if (teamNames.length > 0)
    {
        var camlQuery= new SP.CamlQuery();
        camlQuery.set_folderServerRelativeUrl(subFolderUrls[nCount]); 
        camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Order0' /></OrderBy></Query></View>"); 
               
        this.collListItems = oList.getItems(camlQuery);        
        
        clientContext.load(collListItems);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryFolderItems), Function.createDelegate(this, this.onQueryFailed));        
    }
}

 递归回调函数

function onQueryFolderItems(sender, args) 
{
	//debugger;
	
    var listItemInfo = '';

    var listItemEnumerator = collListItems.getEnumerator();
        
    listItemInfo += "<ul>";
    
    while (listItemEnumerator.moveNext()) 
    {
        var oListItem = listItemEnumerator.get_current();                       
        
        listItemInfo += "<li>";

       	listItemInfo += "<div class='contactUsImg'>";
        listItemInfo += "<img alt='' src=" + escape(oListItem.get_fieldValues().FileRef) + " width='75' height='74'>";
        listItemInfo += "</div>";
                
        listItemInfo += "<div class='contactUsContent'>";
        listItemInfo += "<p><strong>" + oListItem.get_fieldValues().Full_x0020_Name + "</strong><br>";
        listItemInfo += "<span class='referenceTxt'>" + oListItem.get_fieldValues().Title + "</span><br>";
        listItemInfo += "<a href='mailto:" + oListItem.get_fieldValues().Email + "'>" + oListItem.get_fieldValues().Email + "</a><br>";
        listItemInfo += oListItem.get_fieldValues().Extension + "</p>";
        listItemInfo += "</div>";
       
        listItemInfo += "</li>"
    }
    
    listItemInfo += "</ul>";
    
    // Create content table base on contact info
    var contactMain = document.getElementById("contactUsMain");
    contactMain.innerHTML = contactMain.innerHTML + createTable(teamNames[nCount], listItemInfo);
    
    nCount++;
    
    if (nCount < teamNames.length)
    {
        // Use recursion to handle query async callback function
        
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_folderServerRelativeUrl(subFolderUrls[nCount]); 
        camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Order0' /></OrderBy></Query></View>"); 
               
        this.collListItems = oList.getItems(camlQuery);        
        
        clientContext.load(collListItems);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryFolderItems), Function.createDelegate(this, this.onQueryFailed));        
    }
}

function createTable(tbTitle, tbContent) {
             
        var tableText = "<h2>" + tbTitle + "</h2><p> </p>"
        tableText += "<table border='0' cellspacing='0' cellpadding='0' width='680'>";
        tableText += "<tbody>";
		tableText += "<tr>";
        tableText += "<td>";
		tableText += tbContent;
        tableText += "</td>";
        tableText += "</tr>";
        tableText += "</tbody>";
    	tableText += "</table>";
    	
        return tableText;
}

function onQueryFailed(sender, args) 
{
    var contactMain = document.getElementById("contactUsMain");
    contactMain.innerHTML = 'Request failed. ' + args.get_message() + '\n' + args.get_stackTrace();
}

function trim (str) 
{
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

</script>