【发布时间】: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>
【问题讨论】:
标签: javascript jquery html sharepoint