2013-12-18 22 views
0

我在下面的代碼中使用Sharepoint設計插入內容webpart。帶Sharepoint和Divs的SPServices

該代碼列出了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> 

回答

0

你可能想檢查我的API來處理與SharePoint:SharepointPlus,尤其是$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>'); 

很抱歉,但很難幫助這個量的信息。

0

我假設#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輸出,然後將其注入到容器元素中。

相關問題