Jquery SPServices与Sharepoint和Divs

我正在使用Sharepoint Design，并在内容Web部件中插入以下代码

该代码列出了带有库SPServices的文件和文件夹，并显示了PDF 如果单击了链接。在我的图书馆PDFLibrary中，我有一些文件夹 每个文件夹中都有一些文件。代码运行良好，但我现在的问题是 如何以手风琴效果显示这些菜单

我特意在h3标记之间生成文件夹名称，但我需要在每个链接组上使用分隔符：

h3 PDF Folder1 /h3
div
  link file1
  link file2
  link file3
/div

这样，在我的代码中，当我尝试在链接之前插入div时，浏览器会立即将其关闭：

h3 PDF Folder1 /h3
div /div (<= HERE IS WRONG!)
link file1
link file2
link file3

我找到的解决方案是在页面完全加载后插入另一个带有手风琴代码的Web部件，但这并不理想

是否无法动态插入div

这是我的密码：

<script type="text/javascript" src="/Scripts/pdfobject.js"></script>
<script language="javascript" type="text/javascript">
  $(document).ready(function () {

    // var to generate ids for each element of list
    var _id = 1;

    $().SPServices({
      operation:  "GetListItems",
      listName: "PDFLibrary",

      completefunc: function (xData, Status) {          

        $(xData.responseXML).find("z\\:row, row").each(function() {
          //take the type of object. 1 = folder / 0 = file
          var thisFSObjType = $(this).attr("ows_FSObjType").split(";#")[1];

          if(thisFSObjType == 1) {
            //mount the string to get the current folder
            var _initialString = "<QueryOptions><Folder>PDFLibrary/";   
            var _folderName = $(this).attr("ows_LinkFilename");                 
            var _finalString = "</Folder></QueryOptions>"

            var _CAMLQueryString = _initialString + _folderName + _finalString;

            //print the current folder on div
            $("#pdflist").append(_folderName).append("<br/>");           


            //this function lists the files inside the current folder
            $().SPServices({
              operation: "GetListItems",
              async: false,
              listName: "PDFLibrary",

              CAMLQueryOptions: _CAMLQueryString,                           

              completefunc: function (xData, Status) {
                $(xData.responseXML).find("z\\:row, row").each(function () {
                  var _url = 'http://mysite.org/' + $(this).attr("ows_FileRef").split(";#")[1];
                  var _title = $(this).attr("ows_LinkFilename");                                               
                  var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");

                  $(_link).append(_title);
                  $("#pdflist").append(_link).append("<br/>");

                  // set id to current file
                  var idpdf = "#" + _id;

                  // load file into pdfview div
                  $(idpdf).click(function(event){
                    event.preventDefault();

                    var myPDF = new PDFObject({ 

                      url: $(this).attr('href'),
                        pdfOpenParams: {
                          navpanes: 1,
                        view: "FitV",
                        pagemode: "thumbs"
                        }

                    }).embed("pdfview");

                  });
                  _id = _id + 1;                         
                });
                $("#pdflist").append("<br/>"); 
              }

            });
          }
        });

      }
    }); 
  });  
</script>

---

您可能需要检查my API以处理Sharepoint:，尤其是folderOptions。这将使您的代码更加简单：-

关于你的问题，还不是很清楚。当你说浏览器立即关闭时，什么是关闭的？ 当然，您可以毫无问题地在DOM中添加一个DIV

然而，在这里，你想要实现的东西似乎只是视觉上的。这意味着你可以用CSS来做，不是吗

我想我们在您提供的代码中遗漏了太多东西来帮助您。我在任何地方都看不到插入的H3。什么是pdflist？您试图在代码中的何处插入DIV？前后HTML代码的外观如何

您还可以重构以下代码：

var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");
$(_link).append(_title);
$("#pdflist").append(_link).append("<br/>");

致：

---

很抱歉，要处理这么多的信息很难。

我假设pdflist是主循环中所有文件夹的容器DIV标记…但是我没有看到您在代码中的其他任何地方为循环中的每个文件夹实例插入DIV

为什么不在子循环之外生成一个DIV对象和链接呢

//print the current folder on div
$("#pdflist").append(_folderName).append("<br/>");  

//** CREATE SUB-CONTAINER DIV FOR THIS FOLDER **
var _container = $("<div class="folderList" id='someID' />"); 

//this function lists the files inside the current folder
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "PDFLibrary", 
    CAMLQueryOptions: _CAMLQueryString,                           

    completefunc: function (xData, Status) {
        $(xData.responseXML).find("z\\:row, row").each(function () {
            var _url = 'http://mysite.org/' + $(this).attr("ows_FileRef").split(";#")[1];
            var _title = $(this).attr("ows_LinkFilename");              
            var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");

            $(_link).append(_title);
            $(_container).append(_link); //** APPEND LINK TO DIV **
            $("#pdflist").append(_container).append("<br/>"); // ** APPEND DIV TO MAIN CONTAINER **
            ... etc ...

另一种选择是以串联字符串的形式生成HTML输出，然后将其注入容器元素

//print the current folder on div
$("#pdflist").append(_folderName).append("<br/>");  

//** CREATE SUB-CONTAINER DIV FOR THIS FOLDER **
var _container = $("<div class="folderList" id='someID' />"); 

//this function lists the files inside the current folder
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "PDFLibrary", 
    CAMLQueryOptions: _CAMLQueryString,                           

    completefunc: function (xData, Status) {
        $(xData.responseXML).find("z\\:row, row").each(function () {
            var _url = 'http://mysite.org/' + $(this).attr("ows_FileRef").split(";#")[1];
            var _title = $(this).attr("ows_LinkFilename");              
            var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");

            $(_link).append(_title);
            $(_container).append(_link); //** APPEND LINK TO DIV **
            $("#pdflist").append(_container).append("<br/>"); // ** APPEND DIV TO MAIN CONTAINER **
            ... etc ...