0

我正在使用 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>
4

2 回答 2

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

于 2014-04-05T16:48:56.160 回答
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>');

很抱歉，但很难提供这么多信息。

于 2013-12-19T07:44:30.113 回答