65.9K
CodeProject 正在变化。 阅读更多。
Home

自定义内容查询 Web 部件和项目样式

Ravi Gunishetti
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (9投票s)

2014年4月8日

CPOL

6分钟阅读

viewsIcon

116938

本文介绍如何在 SharePoint 2010 中自定义 CQWP，而无需编写任何代码或进行部署。

引言

内容查询 Web 部件 (CQWP) 用于在同一网站集内显示来自其他网站的 SharePoint 内容。此 Web 部件非常巧妙，拥有许多酷炫的功能。通过 CQWP，您可以控制内容的显示方式。我们可以使用 HTML 表格来根据需要格式化显示。本文介绍如何在 SharePoint 2010 中自定义 CQWP，而无需编写任何代码或进行部署。

步骤

  1. 将“内容查询 Web 部件”插入到父网站的主页。
  2. 自定义“内容查询 Web 部件”以显示子网站的“供应商列表”列。
  3. 更新“内容查询 Web 部件”属性以包含“供应商列表”列。
  4. 修改“样式库”的 Itemstyle.xsl 文件，以在 HTML 表格（带标题）中包含“供应商列表”字段。
  5. 更改 CQWP 样式为 VendorCustomStyle，以渲染带标题的多列。

将“内容查询 Web 部件”插入到父网站的主页。

  1. 打开 SharePoint 2010 主页，点击网站操作，然后点击编辑页面。页面将显示在编辑模式下。
  2. 在“编辑工具”中，选择“插入 Web 部件”，然后点击“内容汇总”类别，选择“内容查询”，然后点击添加按钮。请参考下图。

自定义“内容查询 Web 部件”以显示子网站的“供应商列表”列。

  1. 编辑 Web 部件属性，在“查询”部分，选择“显示来自以下列表的项目”，然后点击“浏览”按钮，导航到子网站并选择“供应商自定义列表”。请参考下图。

  2. 现在，在 Web 部件中选择以下附加设置，这些设置将根据您的需求进行调整，然后点击“确定”保存对 CQWP 的更改，它将显示 Web 部件中的标题列。

    要显示多个字段，请按照以下步骤操作。

更新“内容查询 Web 部件”属性以包含“供应商列表”列。

  1. 在 CQWP 中，点击并选择“导出”选项，然后将 .webpart 文件保存到您的桌面位置。请参考下图。

  2. 用记事本打开导出的 .webpart 文件，在编辑属性之前，请参考以下说明。
    • 所有列名都应指定为 SharePoint 内部名称。SharePoint 字段的内部名称与显示名称不同。例如，如果列名包含空格，则内部名称将编码为 _x0020_
    • 这些字段中的值非常敏感，错误的空格或分号会破坏它。
    • 不要在文件中标签之间包含任何额外的空格。

    查找“供应商列表”字段的内部列名。

    导航到“供应商列表”，然后转到“列表设置”，逐一点击列并检查 URL 查询字符串。在查询字符串中，您将看到以下内容：

    示例 1

    _layouts/FldEdit.aspx?List=%7B04013F36%2D9F2D%2D4A5E%2DBE29%2D2CE6EE2E50FC%7D&Field=Vendor%5Fx0020%5FDescription

    这里我们需要关注 Field= 部分，它将是 Vendor%5Fx0020%5FDescription

    这里 %5F 代表 '_'。因此，内部字段名称将是 Vendor_x0020_Description，而字段标题将是 Vendor Description

    示例 2

    /_layouts/FldEdit.aspx?List=%7B37920121%2D19B2%2D4C77%2D92FF%2D8B3E07853114%7D&Field=Go%5Fx002d%5Flive

    这里的内部字段名称将是 Go_x002d_live，而字段标题将是 Go-live

    示例 3

    _layouts/FldEdit.aspx?List=%7B04013F36%2D9F2D%2D4A5E%2DBE29%2D2CE6EE2E50FC%7D&Field=IT%5Fx0020%5FHelpDesk%5Fx0020%5F%5Fx0023%5F

    这里的内部字段名称将是 IT_x0020_HelpDesk_x0020__x0023_，而字段标题将是 IT HelpDesk #

    我希望以上示例能为您节省大量时间！

  3. 现在我们需要更新 CommonViewFields 属性的值。CommonViewFields 属性用于在 CQWP 中显示所需的字段。在 .webpart 文件中找到 CommonViewFields 属性，它看起来如下。

    <property name="CommonViewFields" type="string">InternalColumnNameGoesHere, FieldType</property>

    现在我们需要根据以下方式包含我们所有的供应商列表字段。

    <property name="CommonViewFields" type="string">VendorID, Number;Title,
Text;Vendor_x0020_Description, Text;Vendor_x0020_Country, Choice;Vendor_x0020_Date,
DateTime;Author, User</property>

    这里的字段类型是相应列的类型。另外，列出的字段类型正确非常重要，如果错误，Web 部件将不会显示数据。以下是各种字段的数据类型列表。

    • 文本
    • 注意
    • 数字
    • 货币
    • 整数
    • 布尔值
    • 日期时间
    • 多线程
    • 查找
    • 选择
    • URL
    • 计数器
    • 用户
  4. 保存 .webpart 文件，然后通过点击“插入”并选择“上传 Web 部件”选项将其上传回主页，然后点击“浏览”以上传更新后的文件。请参考下图。

现在主页上将有两个 CQWP，我们可以删除旧的。

修改“样式库”的 Itemstyle.xsl 文件，以在 HTML 表格（带标题）中包含“供应商列表”字段。

编辑 Web 部件，导航到“样式”部分以查看样式属性，它看起来与下图类似。这里的“项目样式”下拉菜单将显示所有默认样式，需要按照以下步骤进行自定义。

CQWP 使用位于网站集样式库中的 ItemStyle.xsl 文件。通过编辑 ItemStyle.xsl 文件，我们可以添加自定义的项目样式，该样式可以从 CQWP 中选择，以显示所有带有标题的供应商列表字段。

在 SharePoint 2010 中编辑 ItemStyle XSLT 文件。

  1. 打开网站集 URL。
  2. 将 /SitePages/Home.aspx 替换为 /Style%20Library/Forms/AllItems.aspx 以打开样式库。
  3. 现在将显示以下文件夹列表。打开 XSL 样式表文件夹以查看 Itemstyle.xsl 文件。

  4. 将 ItemStyle.xsl 文件下载到您的计算机。
  5. 用记事本打开它，然后滚动到文件底部。现在复制以下代码块并将其粘贴到关闭的 xsl:stylesheet 标签上方。这里，第一个 HTML 表格行代表列标题，第二个 HTML 表格行代表实际数据。
    <xsl:template name="VendorCustomStyle" match="Row[@Style='VendorCustomStyle']" mode="itemstyle">
    <html>
    <table width="100%">
    <xsl:if test="count(preceding-sibling::*)=0">
        <tr>
        <td width="8%" valign="top"><div class="item"><b>Vendor ID</b></div></td>
        <td width="12%" valign="top"><div class="item"><b>Vendor Name</b></div></td>
        <td width="50%" valign="top"><div class="item"><b>Vendor Description</b></div></td>
        <td width="10%" valign="top"><div class="item"><b>Vendor Country</b></div></td>
        <td width="10%" valign="top"><div class="item"><b>Vendor Date</b></div></td>
        <td width="10%" valign="top"><div class="item"><b>Created By</b></div></td>
    </tr>
    </xsl:if>
    <tr>
        <td width="8%" valign="top"><div class="item"><xsl:value-of select="@VendorID" /></div></td>
        <td width="12%" valign="top"><div class="item"><xsl:value-of select="@Title" /></div></td>
        <td width="50%" valign="top"><div class="item"><xsl:value-of select="@Vendor_x005F_x0020_Description" disable-output-escaping="yes" /></div></td>
        <td width="10%" valign="top"><div class="item"><xsl:value-of select="@Vendor_x005F_x0020_Country" /></div></td>
        <td width="10%" valign="top"><div class="item"><xsl:value-of select="@Vendor_x005F_x0020_Date" /></div></td>
        <td width="10%" valign="top"><div class="item"><xsl:value-of select="@Author" /></div></td>
    </tr>
    </table>
    </html>
  </xsl:template>

    这里的字段名非常敏感，如果我们遗漏了字段名中的 _x005f 会导致其出错。请确保包含正确的字段名，这与内部名称不同。

    有关各种字段，请参考以下示例。

    字段名 XSL 字段名称 内部名称
    供应商描述 @Vendor_x005F_x0020_Description Vendor_x0020_Description
    上线 @Go_x005F_x002d_live Go_x002d_live
    IT 帮助台 # @IT_x005F_x0020_HelpDesk_x005F_x0020__x005F_x0023_ IT_x0020_HelpDesk_x0020__x0023_

    在 itemstyle 中使用此输出标题。

    <xsl:if test="count(preceding-sibling::*)=0">
    </xsl:if>

    在 itemstyle 中使用此输出页脚。

    <xsl:if test="count(following-sibling::*)=0">
    </xsl:if>

  6. 保存文件，转到样式库文件夹，然后将更新后的文件上传到 XSL 样式表文件夹，然后点击保存按钮。现在右键单击 ItemStyle 文件并发布一个主版本。此步骤非常重要，如果不发布主版本，更改将不会反映在 itemstyle 中。

将 CQWP 样式更改为 VendorCustomStyle，以渲染带标题的多列。

  1. 打开网站主页，点击网站操作，然后点击编辑页面。
  2. 现在，在 CQWP 上点击编辑，然后点击“修改共享 Web 部件”，并展开“演示”类别。在“样式”部分，从“项目样式”框中选择 VendorCustomStyle。请参考下图。

  3. 现在点击 Web 部件窗格中的“确定”以应用自定义样式。
  4. 现在，“内容查询 Web 部件”将使用 VendorCustomStyle，并在 Web 部件中以带标题的多列形式进行渲染。
  5. 这是带标题的输出。

© . All rights reserved.