Question

我有一个场景，我需要将sharepoint列表绑定到动态创建的html表，并使用内容编辑器webpart中的jquery来显示site.Please帮我解决这个问题。我正在使用sharepoint 2010.Thanks提前

我在这里尝试了一些东西，但没有运气，请帮我解决这个问题。谢谢enter code here

<script type="text/javascript" language="javascript">
    var _clientContext;
    var _web;
    alert("Working")
    //ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");


    function RetrieveListItems() {
        alert("Test");
        _clientContext = new SP.ClientContext.get_current();
        alert(Context);
        _web = _clientContext.get_web();
        alert(web);
        var list = _web.get_lists().getByTitle('Planning Partners');
        alert(list);
       // var camlQuery = new SP.CamlQuery();
        var myquery = new SP.CamlQuery.createAllItemsQuery();
        allItems = list.getItems(myquery);
        _clientContext.load(allItems);
        _clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
    }

    function success() {
        var Image = null;
        var Linkurl = null;
        var Title = null;
        //        var sHtml = "";
        alert("success");
        var ListEnumerator = this.allItems.getEnumerator();

        while (ListEnumerator.moveNext()) {

            var currentItem = ListEnumerator.get_current();

            Image = currentItem.get_item('Image');
            Linkurl = currentItem.get_item('Linkurl');
            Title = currentItem.get_item('Title');
            //var tbl = document.createElement("tbl");
            var row = document.createElement("tr");
            var $table = $('<table>');
            $table.append('<caption>MyTable</caption>')
            $table.append('<thead>');
            $table.append('<tr>');

            if (Image != oListItem.get_item('Image')) {
                var cell = document.createElement("td");
                var cellText = document.createElement("<image imgurl='" + oListItem.get_item('Image') + "'></Image>");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }


            if (Linkurl != oListItem.get_item('Linkurl')) {
                var cell = document.createElement("td");
                var cellText = document.createElement("<a target='_blank'  href ='" + oListItem.get_item('Linkurl') + "'>" + oListItem.get_item('Title') + "</a>");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            if (Title != oListItem.get_item('Title')) {
                var cell = document.createElement("td");
                var cellText = document.createElement("<p>" + Title + "</p>");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            $table.append('</tr>');
            $table.append('</thead>');
            tblBody.appendChild(row);
            tbl.appendChild(tblBody);
            body.appendchild(tbl);
        }
    }


    //            sHtml += '<table><tr><td><img src="' + Image + '" height="55px" width="55px"></td><td><table><tr><td valign="top"><div class="fieldsTitle">' + Linkurl + '</div></td></tr><tr><td valign="top">' + Title + '<a href="/">Read More >></a></td></tr><tr><td></td></tr></table></td></tr></table>';

    //        document.getElementById('MainDiv').innerHTML = sHtml;
    //    }

    function failed(sender, args) {
        alert("failed Message" + args.gte_message());
    }
</script>

Answer 1

不是通过JavaScript创建元素，只需创建一个变量来存储HTML标记，最后使用Jquery在页面上添加。使用下面的脚本，希望这会对你有所帮助。如果“Image”和“Linkurl”是HyperLink或Picture Column，则使用currentItem.get_item（'Image'）。 get_url（）。我认为这是您案件中的问题：）

            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

            <script type="text/javascript" language="javascript">
                var _clientContext;
                var _web;
                ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");
                function RetrieveListItems() {
                    _clientContext = new SP.ClientContext.get_current();
                    _web = _clientContext.get_web();
                    var list = _web.get_lists().getByTitle('Planning Partners');
                    var myquery = new SP.CamlQuery.createAllItemsQuery();
                    allItems = list.getItems(myquery);
                    _clientContext.load(allItems);
                    _clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
                }

                function success() {
                    var Image = null;
                    var Linkurl = null;
                    var Title = null;
                    var txtHTML = "";
                    var ListEnumerator = this.allItems.getEnumerator();
                    while (ListEnumerator.moveNext()) {
                        var currentItem = ListEnumerator.get_current();
                        Image = currentItem.get_item('Image');
                        Linkurl = currentItem.get_item('Linkurl');
                        Title = currentItem.get_item('Title');
                        var row = document.createElement("tr");

                        txtHTML = txtHTML + "<tr>";
                        txtHTML = txtHTML + "<td>";
                        if (Image != null) {
                            txtHTML = txtHTML + "<image src='" + Image.get_url() + "'></Image>";
                        }
                        txtHTML = txtHTML + "</td>";

                        txtHTML = txtHTML + "<td>";
                        if (Linkurl != null) {
                            txtHTML = txtHTML + "<a target='_blank'  href ='" + Linkurl.get_url() + "'>" + Title + "</a>";
                        }
                        txtHTML = txtHTML + "</td>";

                        txtHTML = txtHTML + "<td>";
                        if (Title != null) {
                            txtHTML = txtHTML + "<p>" + Title + "</p>";
                        }
                        txtHTML = txtHTML + "</td>";
                        txtHTML = txtHTML + "</tr>";
                    }
                    $("#tblCustomListData").append(txtHTML);
                }
                function failed(sender, args) {
                    alert("failed Message" + args.gte_message());
                }
            </script>
            <table id="tblCustomListData" border="1">
                <thead>
                    <tr>
                        <th>Image
                        </th>
                        <th>Linkurl
                        </th>
                        <th>Title
                        </th>
                    </tr>
                </thead>
            </table>

jquery动态创建html表并绑定其中的sharepoint列表项

1 个答案: