带有Sharepoint和Divs的SPServices

Question

我正在使用Sharepoint Design，并将以下代码插入内容Webpart中。

该代码列出了带有库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

我发现的解决方案是在页面完全加载后，用手风琴代码插入另一个Webpart，但这并不理想。

动态插入的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>

Answer 1

您可能需要检查我的API以处理Sharepoint： SharepointPlus ，尤其是$文件 folderOptions的$ SP（）。list（）。get（）和folderOptions 。 它将使您的代码更简单:-)

关于您的问题，目前还不清楚。 当您说“浏览器立即关闭”时，关闭了什么？ 当然，您可以毫无问题地在DOM中添加DIV。

但是，在这里，您想要实现的目标似乎只是视觉上的。 这意味着您可以使用CSS进行操作，不是吗？

我想我们在您提供的可帮助您的代码中遗漏了太多东西。 我在任何地方都看不到插入的H3 。 什么是#pdflist ？ 您要在代码中的哪个位置插入DIV ？ 前后的HTML代码看起来如何？

您也可以重构以下代码：

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

至：

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

抱歉，要获得如此大量的信息很难。

Answer 2

我假设#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输出，然后将其注入到容器元素中。