在 SharePoint 2013 中集成 Bootstrap 框架
本文介绍了如何将 Bootstrap 框架与 SharePoint 集成，以及如何使用 Bootstrap 框架和 XSL 自定义任务列表。
引言
本文教你如何将 Bootstrap 框架与 SharePoint 集成，以及如何使用 Bootstrap 框架改善任务列表视图的外观和感觉。该列表将包含以下功能：
- 搜索
- 排序
- 分页
- 将任务项导出到 Excel、CSV 和 PDF
- 从视图中复制选定的任务项到剪贴板
- 打印任务项
背景
我们将要在 SharePoint 2013 站点中集成 Bootstrap 框架，以改善站点外观和感觉，并且该站点将支持 RWD 设备。
以下是集成 Bootstrap 框架并自定义 SharePoint 2013 站点中任务列表外观和感觉的步骤：
- 下载 Bootstrap 框架
- 将所需文件上传到样式库
- 在母版页中添加 JS 和 CSS 引用
- 创建一个 XSL 文件以修改任务列表视图
- 将自定义 XSL 文件应用于任务列表视图 Web 部件
下载 Bootstarp 框架
- 打开链接 https://bootstrap.ac.cn/getting-started/#download
- 点击“Download bootstrap”按钮
- 下载完成后，将文件解压到您的本地文件夹中
将文件上传到样式库
- 通过单击 站点设置-> 站点内容-> 样式库 导航到样式库
- 创建如下所示的文件夹结构
- 创建完成后，单击 CSS 文件夹并上传以下文件
-
- 以下 JS 文件将上传到 JS 文件夹中
- 将字体文件上传到样式库中的 fonts 文件夹
- 将 task.xsl 文件上传到 xsl 文件夹
在母版页中添加 JS 和 CSS 引用
在 Web 设计器库 组中打开母版页 (设置->站点设置->母版页和页面布局)
在 <!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>--> 行之后添加以下链接：
<!--SPM:<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/AH/CSS/bootstrap.css%>" after="core15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/AH/CSS/font-awesome.css%>" after="core15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/AH/CSS/dataTables.bootstrap.css%>" after="core15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/AH/CSS/responsive.dataTables.css%>" after="core15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/AH/CSS/buttons.dataTables.min.css%>" after="core15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/AH/CSS/sb-admin-2.css%>" after="core15.css" runat="server"/>-->
在 body 部分的末尾，添加以下 js 链接。 我们在 body 部分的末尾添加脚本的原因是脚本将在加载页面后加载。
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscroll" Name='~SiteCollection/Style Library/AH/JS/jquery.min.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol2" Name='~SiteCollection/Style Library/AH/JS/jquery.dataTables.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol3" Name='~SiteCollection/Style Library/AH/JS/dataTables.bootstrap.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol4" Name='~SiteCollection/Style Library/AH/JS/dataTables.buttons.min.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol5" Name='~SiteCollection/Style Library/AH/JS/buttons.flash.min.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol7" Name='~SiteCollection/Style Library/AH/JS/pdfmake.min6.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol8" Name='~SiteCollection/Style Library/AH/JS/vfs_fonts7.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol9" Name='~SiteCollection/Style Library/AH/JS/buttons.html5.min5.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol10" Name='~SiteCollection/Style Library/AH/JS/buttons.print.min.js' runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink ID="ScriptLinkscrol11" Name='~SiteCollection/Style Library/AH/JS/sb-admin-2.js' runat="server"/>-->
创建 Xsl 文件
以下 JavaScript 代码将在 SharePoint 模式弹出窗口中打开 添加任务列表表单。
url - 新的任务列表表单 url
title - 弹出框的名称
dialogReturnValueCallback - 这是一个回调函数，将在关闭弹出窗口后执行。 因此，当我们添加新项目时，将刷新列表视图网格以反映页面上的更改
function AddTask()
{
var options = {
url: "../Lists/tasks/NewForm.aspx",
title: "Add Task",
dialogReturnValueCallback: function (dialogResult) {
if (dialogResult != SP.UI.DialogResult.cancel)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
},
allowMaximize: false
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
提及您要在报表中添加的列的内部名称：
<xsl:value-of select="@项目_x0020_名称" disable-output-escaping="yes"></xsl:value-of>
下面的 excel 文件代码
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
exclude-result-prefixes="msxsl" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method='html' indent='yes'/>
<xsl:template match='dsQueryResponse'>
<div style="width:98%;padding-left:10px">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
All Open Task
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover " id="Task-table">
<thead>
<tr>
<td colspan="9" style="text-align:left">
<input type="button" class="btn btn-primary" >
<xsl:attribute name="value">
Add New Task
</xsl:attribute>
<xsl:attribute name="onclick">
AddTask()
</xsl:attribute>
</input>
</td>
</tr>
<tr style="color: White;background-color: #00B3E3;font-weight: bold;">
<th>ID</th>
<th>Project Name</th>
<th>Task Name</th>
<th>Due Date</th>
<th>Assigned To</th>
<th>Comments</th>
<th>% of Complete</th>
<th></th>
</tr>
</thead>
<tbody>
<xsl:apply-templates select='Rows/Row'/>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
</div>
</div>
<xsl:text disable-output-escaping="yes">
<script>
function AddTask()
{
var options = {
url: "../Lists/tasks/NewForm.aspx",
title: "Add Task",
dialogReturnValueCallback: function (dialogResult) {
if (dialogResult != SP.UI.DialogResult.cancel)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
},
allowMaximize: false
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
function EditTask(Parameter)
{
var options = {
url: "../Lists/tasks/EditForm.aspx?ID="+Parameter,
title: "Add Task",
dialogReturnValueCallback: function (dialogResult) {
if (dialogResult != SP.UI.DialogResult.cancel)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
},
allowMaximize: false
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
$(document).ready(function () {
$('#Task-table').DataTable({
responsive: true,
dom: 'Bfrtip',
buttons: [{
extend: 'copy',
title: 'All Open Task',
exportOptions: {
columns: '0,1,2,3,4,5,6:visible'
}},
{
extend: 'csv',
title: 'All Open Task',
exportOptions: {
columns: '0,1,2,3,4,5,6:visible'
}},
{
extend: 'excel',
title: 'All Open Task',
exportOptions: {
columns: '0,1,2,3,4,5,6:visible'
}},
{
extend: 'pdf',
title: 'All Open Task',
exportOptions: {
columns: '0,1,2,3,4,5,6:visible'
}},
{
extend: 'print',
title: 'All Open Task',
exportOptions: {
columns: '0,1,2,3,4,5,6:visible'
}}
]
});
});
</script>
</xsl:text>
</xsl:template>
<xsl:template match='Row'>
<tr>
<td >
<xsl:value-of select="@ID"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@Project_x0020_Name" disable-output-escaping="yes"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@Title"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@DueDate"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@AssignedTo" disable-output-escaping="yes"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@Body" disable-output-escaping="yes"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@PercentComplete" disable-output-escaping="yes"></xsl:value-of>
</td>
<td>
<input type="button" class="btn btn-primary" >
<xsl:attribute name="value">
Edit
</xsl:attribute>
<xsl:attribute name="onclick">
EditTask('<xsl:value-of select="@ID"></xsl:value-of>')
</xsl:attribute>
</input>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
所有 JavaScript 代码都应写在下面的标签内
<xsl:text disable-output-escaping="yes">
<script&
//javascript code write here
</script>
</xsl:text>
将 xsl 文件应用于列表视图 web 部件
- 在页面中添加列表视图 web 部件
- 编辑 web 部件属性
- 在 web 部件属性的“杂项”部分中提供 XSL 文件的路径，在 XSL 链接中提供路径
历史
创建初始版本
7 月 29 日 - 删除了母版页中不必要的代码