Question

我有一个场景，我需要使用jQuery在动态html表中显示列表数据，以便在站点中使用内容编辑器webpart显示。请事先帮助我解决这个问题......

Answer 1

您可以使用SharePoint客户端上下文REST API获取数据并将其显示在表中。添加对这三个脚本的引用：
1. /_layouts/15/SP.Runtime.js
2./_layouts/15/SP.js
3. //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
并使用以下示例：

<script type="text/javascript">

    $(document).ready(function () {
        fnGetData();
    });
    function fnGetData() {
        context = new SP.ClientContext.get_current();
        web = context.get_web();
        var list = web.get_lists().getByTitle('Users');
        var myquery = new SP.CamlQuery();
        myquery.set_viewXml("<View><Query>" +
                       "<Where>" +
                        "<IsNotNull>" +
    "<FieldRef Name='Title' />" +
    "</IsNotNull>" +
   "</Where>" +
                              "</Query></View>");
        myquery.set_datesInUtc(false);
        myItems = list.getItems(myquery);
        context.load(myItems);
        context.executeQueryAsync(Function.createDelegate(this, function () { fnGetDataSuccess(); }), Function.createDelegate(this, this.fnGetDataFailed));
    }
    function fnGetDataSuccess() {
        var txtHTML = "";
        var ListEnumeratorAcc = this.myItems.getEnumerator();
        while (ListEnumeratorAcc.moveNext()) {
            var currentItem = ListEnumeratorAcc.get_current();
            txtHTML = txtHTML + "<tr>";
            txtHTML = txtHTML + "<td>";
            if (currentItem.get_item('Title') != null) {
                txtHTML = txtHTML + currentItem.get_item('Title');
            }
            txtHTML = txtHTML + "</td>";


            txtHTML = txtHTML + "<td>";
            if (currentItem.get_item('Owner') != null) {
                txtHTML = txtHTML + currentItem.get_item('Owner').get_lookupValue();
            }
            txtHTML = txtHTML + "</td>";
            txtHTML = txtHTML + "</tr>";
        }
        $("#tblCustomListData").append(txtHTML);

    }
    function fnGetDataFailed(sender, args) {
        alert("Error Message:\n" + "URL: " + sender.get_url() + ". \n\Error Description:" + args.get_message());
    }
</script>
<table id="tblCustomListData" border="1">
    <thead>
        <tr>
            <th>Title
            </th>
            <th>Owner
            </th>
        </tr>
    </thead>
</table>

Answer 2

您可以使用SharepointPlus或SPServices来检索列表数据。然后很容易使用jQuery将数据插入HTML页面。

使用jQuery将sharepoint list数据显示到动态html表

2 个答案: