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

使用 XSL 和 CSS 自定义 SharePoint 2013 中列表视图 WebPart 的外观和感觉

senthill
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2016 年 7 月 3 日

CPOL

2分钟阅读

viewsIcon

32887

downloadIcon

242

本文档描述了如何使用 XSL 定制公告列表视图 Web 部件，以及如何使用 CSS 定制内容编辑器 Web 部件样式。

引言

本文将帮助您以良好的外观显示 SharePoint 列表（自定义列表、摘要链接和公告列表）的内容，并且可以在不影响视图 Web 部件设计的情况下动态修改列表内容。此外，无需站点集合管理员权限即可将 Web 部件从一台服务器移动到另一台服务器。

背景

在本文结束时，您将学习如何使用 XSL 和 CSS 更改列表视图 Web 部件的基本设计。

列表视图 Web 部件的基本设计如下

定制后的列表视图 Web 部件

按照以下步骤转换 Web 部件设计

  1. 创建一个自定义列表
  2. 创建一个 XSL 文件
  3. 将 XSL 文件添加到列表视图 Web 部件

创建自定义列表

  1. 导航到站点并单击“设置”选项，然后单击“站点内容”。
  2. 然后单击“添加应用”选项。
  3. 从“您的应用”页面选择“自定义列表”选项……
  4. 为“welcomecontent”指定适当的名称，然后单击“创建”按钮
  5. 然后创建富文本列“Body”，如下所示

创建 XSL 文件

此代码构建 Web 部件的标题部分，如果您想更改标题颜色，请在此处更改并更新 XSL 文件。

<xsl:template match='dsQueryResponse'>

<div class="maincontent" style="border: 2px solid #00B3E3;">
//header part
<div  align="left" style="padding-top: 2px;background-color:#00B3E3;
          width=100%;height:50px" class="title">
          <p style="color:white;font-family: Open Sans;font-size: 25px;
           margin-top: 5px;margin-bottom: 0px;" > Welcome to CodeProject!!!
           <h6 style="color:white;font-family: Open Sans;font-size: 13px;">
            Welcome to codeproject site!!!</h6>
          </p>
       
</div>
      
<div class="mainp" style="padding:10px">
      <xsl:apply-templates select='Rows/Row'/>
</div>
 
</div>
  </xsl:template>

复制以下代码并将其保存为“welcomecontent.xsl”，然后从站点内容页面将文件上传到样式库。

<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 class="maincontent" style="border: 2px solid #00B3E3;">
<div  align="left" style="padding-top: 2px;background-color:#00B3E3;
                   width=100%;height:50px" class="title">
          <p style="color:white;font-family: Open Sans;font-size: 25px;
                   margin-top: 5px;margin-bottom: 0px;" > Welcome to CodeProject!!!
           <h6 style="color:white;font-family: Open Sans;font-size: 13px;">
            Welcome to codeproject site!!!</h6>
          </p>        
</div>
       
<div class="mainp" style="padding:10px">
      <xsl:apply-templates select='Rows/Row'/>
</div>
  
</div>
  </xsl:template>

  <xsl:template match='Row'>
    <xsl:value-of select="@Body" disable-output-escaping="yes"></xsl:value-of>
     </xsl:template>
</xsl:stylesheet>

列表内容将按照以下格式进行转换

<div class="maincontent" style="border: 2px solid #00B3E3;" 
xmlns:ddwrt2="urn:frontpage:internal">
  <div align="left" style="padding-top: 2px;background-color:#00B3E3;width=100%;height:50px" 
   class="title">
    <p style="color:white;font-family: Open Sans;font-size: 25px;margin-top: 5px;
     margin-bottom: 0px;"> Welcome to CodeProject!!!
           </p><h6 style="color:white;font-family: Open Sans;font-size: 13px;">
                Welcome to codeproject site!!!</h6>
    <p></p>
  </div>
  <div class="mainp" style="padding:10px">
  <div class="ExternalClassF1E26ED601AC49FF80AC1AC2D8ED533D">
  <p><strong style="line-height:20.8px;
  ">&#8203;Lorem Ipsum</strong><span style="line-height:20.8px;">
  &nbsp;is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
  when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  It has survived not only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s with the release of 
  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
  software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <span style="line-height:20.8px;">&#8203;
  </span><br></p><p><strong style="line-height:20.8px;">
  Lorem Ipsum</strong><span style="line-height:20.8px;">&nbsp;is simply dummy text of the printing 
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
  ever since the 1500s, when an unknown printer took a galley of type and scrambled it 
  to make a type specimen book. It has survived not only five centuries, 
  but also the leap into electronic typesetting, remaining essentially unchanged. 
  It was popularised in the 1960s with the release of Letraset sheets containing 
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
  including versions of Lorem Ipsum.</span><span style="line-height:20.8px;">&#8203;
  </span>&#8203;<br></p></div></div>
</div>

将 XSL 文件添加到列表视图 Web 部件

  1. 导航到页面库并打开您想要添加此 Web 部件的页面。
  2. 从“站点设置”菜单单击“编辑页面”。
  3. 单击“添加 Web 部件”并选择我们在第一步中创建的列表。

  4. 将 Web 部件添加到页面后，单击“编辑 Web 部件”。

    .

  5. 展开“杂项”部分，并提供存储 XSL 的 XSL 路径（即，样式库）。

  6. 按“确定”。
  7. 现在 Web 部件将以样式呈现。

关注点

历史

  • 2016 年 7 月 3 日：创建初始版本
© . All rights reserved.