Question

我有一个无法自定义的Sharepoint webpart - 它会在到达实际数据表之前生成大量的表。

我想使用jQuery从每个单元格中抓取数据并使用带有类的跨度将其添加到列表项中，以便将其设置为不是真正的表格数据，但这就是sharepoint如何为我在页面中需要的变量提供值;我需要重复每一行来创建几个列表项。

我观察到数据开始有4个表格 - 疯了我知道，但那就是MS如何布局组件，所以我的定位类似于：

$('table table table table tr td').html();

我想生成一个结构列表：

<ul>
 <li>
  <span class="name">Name</span>
  <span class="points">Points</span>
 </li>
 <li>...
</ul>

呈现的Sharepoint Table是（忽略外表）格式如下所示，我在webpart周围包含一个带唯一ID的DIV，以协助定位

<div id="uniqueID">
 <table>
    <tr>
        <td>John Doe</td>
        <td>50</td>
    </tr>
 </table>
</div>

希望有人可以协助如何将其转换为格式化列表

由于

Answer 1

如果我理解正确，$('table table table table tr td').html()会返回<div id="uniqueID">...</div>部分。

如果这是正确的，你可以使用jquery的map()函数循环遍历原始节点并返回一个新节点数组。我不确切地知道你从哪个容器获得原始列表，所以我在原始查询中添加了占位符PARENTNODE，你需要修改它。

var ul = $('<ul/>');
var originalItems = $('table table table table tr td', PARENTNODE);
var items = $.map( originalItems, function(i,node){
  var dataCells = $(node).find('table tr td'),
      li = $('<li/>');

  li.append( '<span class="name">'+ dataCells.eq(0).text()+'</span>'  );
  li.append( '<span class="points">'+ dataCells.eq(1).text()+'</span>'  );

  return li;
});

ul.append( items );

当然，你可以通过将地图放入附加内容来缩短它：

...
ul.append( $.map( ... ) )

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <div id="uniqueID">
        <table>
            <tr>
                <td>John Doe</td>
                <td>50</td>
            </tr>
            <tr>
                <td>John Doe1</td>
                <td>500</td>
            </tr>
        </table>
    </div>
    <div id="list">
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function () {
        var str = "<ul>";
        $('tr').each(function (index, responce) {
            str += "<li> <span class=\"name\">" + $($($(this).children())[0]).text() + "</span><span class=\"points\">" + $($($(this).children())[1]).text() + "</span></li>";
        });
        str += "</ul>";
        $('#list').html(str);
    });
</script>
</html>

Answer 3

您可以使用SharePoint 2010的 JavaScript客户端对象模型从JavaScript访问SharePoint列表/库数据，而无需解析呈现的HTML。

在SharePoint 2010中，要在页面上运行某些JavaScript（不要乱用SharePoint Designer或Visual Studio），您可以：

将HTML和JavaScript的组合放在文本文件中
将文本文件保存到您网站上的文档库
将内容编辑器Web部件添加到您希望HTML / JavaScript显示/执行的页面
编辑Web部件的属性
在“内容链接”属性中，您可以粘贴文本文件的路径

嵌入的JavaScript将在加载该Web部件时运行，并且HTML将显示在您放置它的任何位置。（请注意，SharePoint 2013引入了脚本编辑器Web部件，稍微简化了此过程。）

作为JavaScript客户端对象模型入门的参考，这里有一个准确的例子：

<ul id="PointList"></ul>
<script>
    var pointList = document.getElementById("PointList");

    ExecuteOrDelayUntilScriptLoaded(loadListData,"SP.JS");

    function loadListData(){
        var clientContext = new SP.ClientContext();
        // Replace "Example List" with your list's title below:
        var list = clientContext.get_web().get_lists().getByTitle("Example List");
        var camlQuery = new SP.CamlQuery();
        // use a CAML query to retrieve a set of list items:
        camlQuery.set_viewXml(
            '<View><Query>'+
            '<Where>'+
            //    '<BeginsWith>'+
            //        '<FieldRef Name=\'Title\' /><Value Type=\'Text\'>A</Value>'+
            //    '</BeginsWith>'+
            '</Where>'+
            '<OrderBy>'+
            //    '<FieldRef Name=\'Modified\' />'+
            '</OrderBy>'+
            '</Query></View>');
        var items = list.getItems(camlQuery);
        clientContext.load(items);
        clientContext.executeQueryAsync(
            /* code to run on success: */
            Function.createDelegate(this,
                function(){
                    var item, itemEnumerator = items.getEnumerator();
                    while(itemEnumerator.moveNext()){
                        item = itemEnumerator.get_current();
                        // Replace "Title" and "Points" with the 
                        // internal names of your fields below:
                        addHTML(item.get_item("Title"), item.get_item("Points"));
                    }
                }
            ),
            /* code to run on error: */
            Function.createDelegate(this,
                function(sender,args){
                    alert(args.get_message());
                }
            )
        );
    }
    function addHTML(name, points){
        var li = document.createElement("li"),
         nameSpan = document.createElement("span"),
         pointSpan = document.createElement("span");
        pointList.appendChild(li);
        li.appendChild(nameSpan);
        li.appendChild(pointSpan);
        nameSpan.innerHTML = name;
        pointSpan.innerHTML = points;
    }
</script>

我在CAML查询中注释了Where和OrderBy子句的内部元素，以便它只是按默认顺序抓取所有内容，但您仍然可以看到一般格式。通过更改该CAML查询，您可以获取已过滤的项目子集和/或按特定顺序获取它们。（有关CAML语法的更多详细信息，请查看this answer。）

以下是Microsoft的一些优秀的JavaScript参考资料，供进一步研究使用：

使用jQuery刮取表数据并转换为无序列表

3 个答案: