jquery - SharePoint SOAP GetListItems VS jQuery - 如何使用 Ajax 循环自定义列表项以及 Ajax 刷新列表内容？

Question

我正在使用 jQuery 通过 GetListItems 方法访问 Sharepoint 2007 的 SOAP 接口(interface)，以读取自定义的公告列表，以便使该列表每分钟刷新一次(如果列表的所有者添加新内容，以便新内容变得可见，而无需最终用户刷新其共享点屏幕)。我想要做的不仅仅是刷新该列表，我想让列表中的每个项目一次循环浏览一个(也许每个项目保持可见 10 秒，然后下一个项目将加载到该空间中。

这是我到目前为止的代码:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/SiteCollectionDocuments/jquery.timers-1.0.0.js" ></script>  
<script type="text/javascript">

$(document).ready(function() {

// Create the SOAP request        
// NOTE: we need to be able to display list attachments to users, hence the addition of the
// <queryOptions> element, which necessitated the addition of the <query> element

var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>
<soapenv:Body> \
   <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
     <listName>testlist</listName> \
     <viewFields> \
       <ViewFields> \
         <FieldRef Name='Title' /> \
         <FieldRef Name='Body' /> \
         <FieldRef Name='ID' /> \
         <FieldRef Name='Attachments' /> \
       </ViewFields> \
     </viewFields> \
     <query> \
       <Query /> \
     </query> \
     <queryOptions> \
       <QueryOptions> \
         <IncludeAttachmentUrls>TRUE</IncludeAttachmentUrls> \
       </QueryOptions> \
     </queryOptions> \
    </GetListItems> \
  </soapenv:Body> \
  </soapenv:Envelope>";

// call this SOAP request every 20 seconds
$("#tasksUL").everyTime(20000,function(i){
    // our basic SOAP code to hammer the Lists web service
    $.ajax({
    url: "http://ourdomain.net/_vti_bin/lists.asmx",
    type: "POST",
    dataType: "xml",
    data: soapEnv,
    error: printError,
    complete: processResult,
    contentType: "text/xml; charset=\"utf-8\""
    });
  });
});

// basic error display that will pop out SOAP errors, very useful!
function printError(XMLHttpRequest, textStatus, errorThrown)
{
 alert("There was an error: " + errorThrown + " " + textStatus);
  alert(XMLHttpRequest.responseText);
}


// main method that will cycle through the SoAP response nodes
function processResult(xData, status) 
{

  $(xData.responseXML).find("z\\:row").each(function() 
  {
    // resets display element
   $("#tasksUL").empty();

   // gets attachments array - if there is more than one attachment,
   // they get seperated by semi-colons in the response
   // they look like this natively (just an example):
   // ows_Attachments = ";#http://server/Lists/Announcements/Attachments/2/test.txt;
   // #http://server/Lists/Announcements/Attachments/2/UIP_Setup.log;#"

       var mySplitResult = $(this).attr("ows_Attachments").split(";");
  // set up storage for later display of images
  var notice_images = "";

  // processes attachments - please forgive the kludge!  
  for(i = 0; i < mySplitResult.length; i++)
  {
   // check to see the proper link URL gets chosen
   if (i % 2 != 0 && i != 0)
   {
    // strips out pound sign
    mySplitResult[i] = mySplitResult[i].replace("#", "");

    // (possibly redundant) check to make sure element isn't simply a pound sign  
    if (mySplitResult[i] != "#")
    {
     // adds an img tag to an output container
     notice_images = notice_images + "<img src='" + mySplitResult[i] + "' border='0' align='right' style='float:right;' /><br />"; 
    }
   }
  }

  // create final output for printing
  var liHtml = "<h3>" + $(this).attr("ows_Title") + "</h3><p>" + notice_images + $(this).attr("ows_Body") + "</p>";

  // assign output to DIV tags
    $("#tasksUL").html(liHtml);

   });

}
</script>

<div id="tasksUL"/>&nbsp;</div>

到目前为止，这都是非常简单的事情(尽管找到关于如何使用 GetListItem SOAP 请求执行操作的合适文档是令人畏惧的)。在我迭代返回的行(PprocessResult 函数)的 block 内部，我正在重置分配给 DIV block 的 HTML，以便只有一行显示为输出。代码的设置方式意味着只有自定义列表中的最后一行可见，因为我没有暂停迭代的代码。

我的想法是在这段代码周围封装一个计时器:

$(xData.responseXML).find("z\\:row").each(MYTIMER(10000, function(){...

但我得到的结果为零或好坏参半。

我向大家提出的问题是:设置我当前的代码以像现在一样刷新源列表数据并一次循环查询该列表中的查询结果(最好使用一个小的在每个项目上暂停以便人们可以阅读)？

Answer 1

我会将您的视觉周期和数据更新周期保留为单独的实体。

设置超时函数来更新 div 容器，并在其中显示数据。您可以根据需要在此列表中添加和删除。

您可以从以下内容开始:

<div id="container">
  <div id="1" class="task">task foo</div>
  <div id="2" class="task">task bar</div>
  <div id="3" class="task">task baz</div>
</div>

然后在数据更新后它可以添加另一个元素:

<div id="container">
  <div id="1" class="task">task foo</div>
  <div id="2" class="task">task bar</div>
  <div id="3" class="task">task baz</div>
  <div id="4" class="task">task lol</div>
</div>

然后使用循环插件简单地循环遍历给定容器元素内的 div 的有序集合。它总是只显示集合中的下一个 div，而不是依赖您的更新插件来重新启动循环。

最流行的 jQuery 元素循环插件是 jquery.cycle.js，地址为 http://malsup.com/jquery/cycle2/ 。您可能还对在线提供的“精简版”版本感兴趣。