使用客户端呈现在 SharePoint 加载项中自定义列表视图

项目
04/08/2023

在 SharePoint 中，客户端呈现提供了一种方法，可让你为 SharePoint 页面中托管的一组控件生成自己的输出。它可以让你使用知名技术（例如 HTML 和 JavaScript）定义 SharePoint 列表视图的呈现逻辑。通过客户端呈现可以指定自己的 JavaScript 资源，并将其托管在加载项可用的数据存储选项（例如，文档库）中。 SharePoint 托管的加载项仅包含 SharePoint 组件。 Sharepoint 托管的外接程序在主机 Web 的独立子网站（称为外接程序 Web）中具有其资源。

使用本文中的示例的先决条件

若要按照此示例中的步骤操作，需要：

Visual Studio 2015 和最新的 Microsoft Office 开发人员工具
SharePoint 开发环境（本地方案需要加载项隔离）

有关如何设置符合你的需求的开发环境的指南，请参阅两种类型的 SharePoint 加载项：SharePoint 托管的加载项和提供程序托管的加载项。

用于帮助你理解使用客户端呈现自定义列表视图的核心概念

下表列出了可帮助你理解列表视图自定义方案所涉及的概念的有用文章。

文章标题	说明
SharePoint 外接程序	了解 Microsoft SharePoint 中新的外接程序模型，可以利用此模型来创建外接程序，这些外接程序对最终用户来说是易于使用的小型解决方案。
适用于 SharePoint 外接程序的 UX 设计	了解在生成 SharePoint 外接程序时可使用的 UX 选项。
SharePoint 中的主机 Web、外接程序 Web 和 SharePoint 组件	了解主机 Web 和外接程序 Web 之间的区别。了解 SharePoint 外接程序中可以包括哪些 SharePoint 组件、将哪些组件部署到主机 Web、将哪些组件部署到外接程序 Web 以及如何在独立的域中部署外接程序 Web。

代码示例：使用客户端呈现自定义列表视图

以下步骤演示如何使用客户端呈现自定义部署到加载项 Web 的列表视图。

创建 SharePoint 加载项项目。
创建带有自定义视图的新列表定义。
在 JavaScript 文件中提供自定义呈现逻辑。

下图显示了公告列表的客户端呈现视图。

公告列表的自定义视图

公告列表的自定义视图

创建 SharePoint 加载项项目

以管理员身份打开 Visual Studio 2015。（为此，请右键单击“开始”菜单上的“Visual Studio”图标，再选择“以管理员身份运行”。）
使用 SharePoint 加载项模板创建新的项目。

下图显示了 SharePoint 加载项模板在 Visual Studio 2015 中的位置，具体位于“模板”>“Visual C#”>“Office/SharePoint”>“Office 加载项”下。

SharePoint 加载项 Visual Studio 模板
提供要用于调试的 SharePoint 网站的 URL。
选择"Sharepoint 托管"作为您的外接程序的托管选项。

创建新的列表定义

右键单击 SharePoint 外接程序项目，添加一个新的"列表"项。创建一个基于公告的可自定义列表。

复制以下标记并将其粘贴到列表功能的 Schema.xml 文件的 Views 元素中。该标记将执行以下任务：

声明一个名为 Overridable 且 BaseViewID=2 的新视图。
为指向使用加载项预配的 JavaScript 文件的 JSLink 元素提供一个值。

注意

JSLink 属性在“调查”或“事件”列表上不受支持。 SharePoint 日历是事件列表。

<View BaseViewID="2" 
    Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb" 
    DisplayName="Overridable" 
    Type="HTML" 
    WebPartZoneID="Main" 
    SetupPath="pages\viewpage.aspx" 
    Url="Overridable.aspx"
    DefaultView="TRUE">
<ViewFields>
    <FieldRef Name="Title" />
</ViewFields>
<Query />
<Toolbar Type="Standard" />
<XslLink>main.xsl</XslLink>
<JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>
</View>

在 JavaScript 文件中提供自定义呈现逻辑

右键单击“脚本”文件夹，并添加新的 JavaScript 文件。将文件命名为 CSRListView.js。

复制以下代码并将其粘贴到 CSRListView.js 文件中。该代码将执行以下任务：

为 PreRender 和 PostRender 事件提供事件处理程序。
提供“页眉、页脚和项”模板集的模板。
注册模板。


(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    // Assign functions or plain html strings to the templateset objects:
    // header, footer and item.
    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
        "<hr><ul id='unorderedlist'>";

    // This template is assigned to the CustomItem function.
    overrideCtx.Templates.Item = customItem;
    overrideCtx.Templates.Footer = "</ul>";

    // Set the template to the:
    //  Custom list definition ID
    //  Base view ID
    overrideCtx.BaseViewID = 2;
    overrideCtx.ListTemplateType = 10057;

    // Assign a function to handle the
    // PreRender and PostRender events
    overrideCtx.OnPreRender = preRenderHandler;
    overrideCtx.OnPostRender = postRenderHandler;

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function builds the output for the item template.
// It uses the context object to access announcement data.
function customItem(ctx) {

    // Build a listitem entry for every announcement in the list.
    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
    return ret;
}

// The preRenderHandler attends the OnPreRender event
function preRenderHandler(ctx) {

    // Override the default title with user input.
    ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
}

// The postRenderHandler attends the OnPostRender event
function postRenderHandler(ctx) {

    // You can manipulate the DOM in the postRender event
    var ulObj;
    var i, j;

    ulObj = document.getElementById("unorderedlist");

    // Reverse order the list.
    for (i = 1; i < ulObj.children.length; i++) {
        var x = ulObj.children[i];
        for (j = 1; j < ulObj.children.length; j++) {
            var y = ulObj.children[j];
            if(x.innerText<y.innerText){                  
                ulObj.insertBefore(y, x);
            }
        }
    }
}

生成并运行解决方案

按 F5 键。

注意

按 F5 键时，Visual Studio 会生成解决方案并部署加载项，同时还会打开加载项的权限页面。
选择“信任它”按钮。
在外接程序 Web 域中输入 /Lists/<your_list_instance> 地址（相对于外接程序目录） (而不是主机 Web 域) ，转到自定义列表。添加一个或两个公告。在功能区上，选择“可重写”视图。

通过