在下拉菜单中使用 Javascript 检索 SharePoint 列表项答案

【问题标题】：Retrieve SharePoint list items with Javascript in a dropdown menu在下拉菜单中使用 Javascript 检索 SharePoint 列表项
【发布时间】：2016-09-15 15:52:10
【问题描述】：

我有一个下拉菜单，当我点击一个项目时，它会将我重定向到一个网站。

<select onChange="window.location.href=this.value">
    <option value='none' selected>Please Select WebSite...</option>
    <option value="http://www.Link1.com">Title1</option>
    <option value="http://www.Link2.com">Title2</option>
    <option value="http://www.Link3.com">Title3</option>
</select>

我想将此脚本与 SharePoint 一起使用，我想知道如何从 SharePoint 列表中检索名称和链接。

我的 Sharepoint 列表名为“WEB”，它有两列：

“标题”（文本）
“链接”（参考）

【问题讨论】：

您使用的是什么版本的 SharePoint？

标签： javascript jquery sharepoint drop-down-menu

【解决方案1】：

此代码从列表中获取数据。将此复制粘贴到控制台以查看它的工作情况，或复制到脚本编辑器 Web 部件。

var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle('WEB');
var query = SP.CamlQuery.createAllItemsQuery();
var items = list.getItems(query);
ctx.load(items);
ctx.executeQueryAsync(function() {
    for (var i = 0; i < items.get_count(); i++) {
        var item = items.getItemAtIndex(0);
        var obj = item.get_fieldValues();
        console.log(obj); // this is sharepoint list item object
        console.log(obj.Title); // the Title
        console.log(obj.Link); // the Link
    }
});

【讨论】：

【解决方案2】：

根据您使用的 SharePoint 版本，答案可能会有所不同。我们目前在生产环境中运行 SharePoint 2010，过去我曾使用 SPServices 库来执行此类操作。你可以在这里找到源代码和文档：

https://spservices.codeplex.com/

基本示例如下所示：

var $j10 = $.noConflict(true);

$j10(document).ready(function() {

  var list = "Current Sites";

  /* Fields within the List you want to utilize or display */

  var fields = "<ViewFields>" +
    "<FieldRef Name='Title' />" +
    "<FieldRef Name='Link' />" +
    "</ViewFields>";

  /* Query parameters for the data set you want to return, in CAML syntax */

  var query = "<Query>" +
    "<OrderBy>" +
    "<FieldRef Name='Title' Ascending='TRUE' />" +
    "</OrderBy>" +
    "</Query>";

  /* Method Call */

  GetListItems(list, fields, query);

});

function GetListItems(listName, listFields, listQuery) {
  $j10().SPServices({

    operation: "GetListItems",
    listName: listName,
    CAMLViewFields: listFields,
    CAMLQuery: listQuery,

    completefunc: function(xData, Status) {

      $j10(xData.responseXML).SPFilterNode("z:row").each(function() {

        /* Any processing required for each row of data begins here... */

        /* Get Field Data */

        var name = ($j10(this).attr("ows_SiteName"));
        var url = ($j10(this).attr("ows_Url"));

        /* Process and Display Field Data */

        $j10("#yourContainerID").append("<option value='" + url.substr(url.indexOf("#") + 1) + "'>" + name.substr(name.indexOf("#") + 1) + "</option>");
      });
    }
  });
}

为了让它运行，您需要在页面上注册适当版本的 SPServices 脚本和 jQuery 库。这在上面引用的 codeplex 网站上有很好的记录。

【讨论】：