【问题标题】:SharePoint 2013 Client-Side Custom Javascript Search Box with ability to populate results into an HTML tableSharePoint 2013 客户端自定义 Javascript 搜索框,能够将结果填充到 HTML 表中
【发布时间】:2020-03-11 22:16:07
【问题描述】:

场景:

  • 客户希望改进他们的 SharePoint 2013“搜索引擎”
  • “搜索引擎”最初是一个更华丽的关键字过滤搜索,输入到脚本编辑器中的各个 SharePoint 2013 列表中。
  • 客户已请求搜索引擎位于能够搜索整个网站集的空白网站页面上。
  • 检索结果后,客户端希望将结果填充到位于搜索引擎正下方的 HTML 表格中。 问题:
  • 在我在 onclick 时重构 URL 以过滤客户端将在列表中看到的内容之前,但我知道情况不再如此。

问题:有没有办法在 onclick 事件时获取这些列表项并将它们显示到 HTML 表格中?在过去的项目中,我进行了静态 XML、CamlQuerys 和 AJAX 调用以在加载时填充 HTML 表中的单元格,但是我从未在 SharePoint 2013 的客户端上进行过类似的操作。 任何帮助将不胜感激!我之前的代码已包含在下面。

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>
<div class="hero-image">
<h1 style="color:black; font:46px castellar; text-shadow: 5px -5px #999999;"><strong>Transaction Retrieval</strong></h1>
</body>
</head>
</html>

<script type="text/javascript">
    function Search() {
        var st = document.getElementById("Searchtxt").value;
        var cd = document.getElementById("coldropdown").value;
        var url = "";

        if (st != "") {
            if (cd == "Employee ID" || cd == "Document ID" || cd == "Cycle Number" || cd == "Type of Transaction") {

                url = "FilterField1=" + cd + "&FilterValue1=" + st;
                window.location.href = "AllItems.aspx?" + url;
                    }
        else {
            return false;
        }  
  }
    function Clear() {  
      window.location.href = "AllItems.aspx";
    }
</script>


<p style="color:black; font:15px georgia;">Search Field:<select id="coldropdown" style="border-radius: 5px; border-color: black;"</p>
<option value="EmployeeID">Employee ID</option>
<option value="DocumentID">Document ID</option>
<option value="CycleNumber">Cycle Number</option>
<option value="TypeofTransaction">Type of Transaction</option>
</select>
<p style="color:black; font:15px georgia;">Search text: <input id="Searchtxt" type="text" style="border-radius: 5px; border-color: black;"</p>
<br>
<br>
<input id="btnSearch" onclick="return Search();" type="button" style=" background-color:Green; color:White; font-size: 12px; border-radius: 6px; box-shadow: 0 14px 16px 0 rgba(0,0,0,0.2), 0 17px 30px 0 rgba(0,0,0,0.19)" value="Search"/>

<input id="btnClear" onclick="return Clear();" type="button" style=" background-color:Red; color:White; border-radius: 6px; font-size: 12px; box-shadow: 0 14px 16px 0 rgba(0,0,0,0.2), 0 17px 30px 0 rgba(0,0,0,0.19)"   value="Clear"/>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Result Table</h2>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Employee ID</th>
      <th>Document ID</th>
      <th>Cycle Number</th>
      <th>Type of Transaction</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

          </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>


    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>


         </tr>
  </table>
</div>

</body>
</html>

Image how the build out looks so far

【问题讨论】:

    标签: javascript jquery html sharepoint


    【解决方案1】:

    是的,SharePoint 有一个丰富的REST-based API,可以在 JavaScript 中从 Ajax 执行。包括specific API'S for Search

    要调用 API 并将其动态呈现在页面上,我建议使用 JavaScript 框架来简化操作。 jQuery 具有用于进行 Ajax 调用的辅助方法,并帮助您操作 DOM 以呈现您的表格,但您可以使用 Angular 或 ReactJS 框架通过分页和精炼器等内容使其功能更加丰富。 Here is a good tutorial that shows you how to do it with jQuery.

    现在,综上所述,您可以通过使用Search Webparts(包括Search Box webpartSearch Results WebpartSearch Refinement webpart)在不使用自定义代码的情况下获得所需的内容。

    【讨论】:

    • 我会看看 REST API,并保持更新:)
    • REST API 的实现非常棒,我能够将列表项呈现到数据表上,您是否知道是否可以从另一个变量中过滤 REST API 搜索?在这种情况下,它在我的代码中将是“st”。当用户输入他们想要搜索的内容时,我希望它过滤掉该搜索框中的内容。
    • 当然,当您使用 REST 搜索 API 时,您的 URL 中包含一个 queryText 参数,您没有理由不能将 JavaScript 变量连接到其中。同样,如果您只查看列表,请将其连接到 $filter 参数中。
    • 如果我试图将多个列表中的数据绘制到一个数据表中,会不会是同样的情况?
    • 要一次查询多个列表,您肯定需要使用search endpoints,但是可以,您可以使用 JavaScript 变量构建参数。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-28
    • 2014-03-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多