帶有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輸出，然后將其注入到容器元素中。