jQuery 与 SharePoint 2010
4.57/5 (4投票s)
将 JQuery 集成/用于 SharePoint 2010
引言
最近我一直在研究将 JQuery 与 SP 2010 站点集成。本文将是 JQuery 系列文章中的第一篇。本文将讨论如何将 JQuery 与 SharePoint 2010 集成/使用。对于希望在 SharePoint 中使用 JQuery 的开发人员来说，必须先将 JQuery 文件/插件包含到门户中，然后才能开始使用它开发用户界面。我们将从一个小型的“Hello World”程序开始，并了解开发人员如何使用 JQuery 库与 SP 2010 列表进行通信，用于 SharePoint Web 服务。
JQuery 与 SharePoint 站点集合的集成
以下部分描述了如何使用 JQuery 和 SP 2010 编写“hello world”代码。这对于您集成任何 JQuery 库和插件来说是必须的步骤。
1. 创建站点集合，命名为“JqueryDemo”。
2. 从 此处 下载 JQuery。我下载了“jquery-1.8.3.min.js”版本的文件。
3. 下载后，将其添加到名为“JS”的 SharePoint 文档库中。此库名称可以根据您的项目需求而定。所有 JavaScript 文件和相关的 JQuery 文件都添加在此处。
4. 创建一个名为“Include.txt”的文本文件，其中将包含对上面添加的 JQuery 文件的引用。
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
</html>
5. 将“Incude.txt”文件添加到通过上一步创建的“JS”文档库中。这也可以是您的 sharepoint 内的任何文件夹。确保您知道该文件的相对路径。
6. 对于“Hello World”演示，让我们将以下代码片段包含到文本文件“QuerySharedDocuments.txt”中。
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello World");
});
</script>
</head>
<body>
</body>
</html>
7. 将“QuerySharedDocuments.txt”文件添加到“JS”文档库
8. 创建一个名为“JQueryTest”的新 sharepoint 页面
9. 导航到“JQueryTest”页面或导航到您想要测试上述代码的页面。
10. 添加一个内容编辑器 Web 部件。
11. 编辑 Web 部件以修改内容链接以指向“/sites/JQueryDemo/JS/Include.txt”。这将确保在此页面中引用所需的 java 脚本和 JQuery 文件。
12. 可以将此内容编辑器 Web 部件的标题留空，因为它仅用于引用 JQuery 文件。
13. 在此下方添加另一个内容编辑器 Web 部件，并将内容链接修改为指向“/sites/JQueryDemo/JS /QuerySharedDocuments.txt”
14. 将内容编辑器 Web 部件的标题更改为“共享文档列表”。
15. 保存页面并运行页面。现在它应该显示“Hello World”消息，如下所示。
16. 现在我们已经成功完成了 SharePoint 内的 JQuery“Hello world”程序。让我们看看如何使用 JQuery 查询文档库。
2 查询 SharePoint 文档库
以下部分将展示如何通过 JQuery 查询“共享文档”库并以表格格式呈现内容。为此，您可以调用 SharePoint 公开的列表 Web 服务，或者您可以使用来自 此处 的 SharePoint Web 服务的 JQuery 库。我更喜欢使用后一种选择，因为它更灵活且易于编写。您需要从 此处 下载最新的 JQuery 文件。我下载了“jquery.SPServices-0.7.2.js”版本。
1. 将文件“jquery.SPServices-0.7.2.js”添加到上面创建的“JS”文档库中。
2. 在“Include.txt”中包含以下代码行，并将其上传到“JS”文档库。
<html>
<head>
<script src="/sites/JQueryDemo/JS/ jquery-1.8.3.min.js " type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
</head>
</html>
3. 修改“QuerySharedDocuments.txt”以查询“共享文档”文档库，并以表格格式列出所有项目。
4. 在 body 标签之间添加以下 html 代码。这将用于在客户端呈现 HTML。
<table id="documentListtable">
<tr class="row-template">
<td class="row-column">Document name </td>
<td class="row-column">Author </td>
<td class="row-column">Last Modified On </td>
<td class="row-column">Doc type </td></tr>
</table>
<div id="templates"style="display: none">
<table>
<tr class="row-template">
<td aligh="center"class="DocumentName" style="width: 100px;">
</td><td class="Author"style="width: 100px;"></td>
<td class="LastModifiedOn" style="width: 100px;"></td>
<td class="Doctype" style="width: 100px;"></td>
</tr>
</table>;
</div>
5. id 为“templates”的 div 下将用于克隆行。• 每列的值将通过在 JQuery 中收到的文档库 XML 中进行导航来动态设置。设置值后，它们将附加到 id 为“documentListtable”的表中。
6. 以下代码用于通过查询“共享文档”库来获取文档列表及其相关属性。
• 操作：在列表 Web 服务中要执行的方法。此处使用“GetListItems”从“ListName”参数中提到的列表中获取项目。
• async：该方法应以异步方式还是同步方式调用
• listName：列表名称。在这种情况下，它是“共享文档”。
• Completefunc：应该调用哪个方法作为回调？
• CAMLRowLimit：应获取的行数。
$(document).ready(function () { $().SPServices({ operation:"GetListItems",
async: false,
CAMLRowLimit: 5,
listName: "Shared Documents",
completefunc: fnCallBack
}); });
7. 以下部分将解释回调函数将如何遍历 xml 并向“documentListtable”表添加行。以下代码具有内联注释，不言自明。
function fnCallBack(xData, Status) {
var index = 0;
$documentListtable = $("#documentListtable");
//Navigate through the XML
$(xData.responseXML).find("z\\:row, row").each(function () {
//Get the values to a local variable
var _url = $(this).attr("ows_FileRef").split(";#")[1];
var _name = $(this).attr("ows_LinkFilename");
var _pdfLink = $("" + _name + "");
var _author = $(this).attr("ows_Editor").split(";#")[1];
var modifiedOn = $(this).attr("ows_Modified");
var _DocIcon = $(this).attr("ows_DocIcon");
//Create clone of the table row
var $row = $("#templates").find(".row-template").clone();
//Add values to the column based on the css class
$row.find(".DocumentName").html(_pdfLink);
$row.find(".Author").html(_author);
$row.find(".LastModifiedOn").html(modifiedOn);
$row.find(".Doctype").html(_DocIcon);
//Change the style for even rows
if (index % 2 == 0) {
$row.addClass("jtable-row-even")
}
index = index + 1;
//add the row to table
$documentListtable.append($row);
});
}
8. 如何呈现？
9. 它将只获取 5 行，因为 CAMLRowLimit 设置为 5。
10. 在“QuerySharedDocuments.txt”中添加的样式，用于为表格行提供交替颜色。
<style>
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
</style>
示例代码
参考文献
http://spservices.codeplex.com/
https://codeproject.org.cn/Articles/429474/Load-while-scrolling