论坛 › Sharepoint › sharepoint中控制的content query web part 控件的显示样式的xslt

457475451 发表于 2015-9-29 07:47:57

sharepoint中控制的content query web part 控件的显示样式的xslt

　　
　　总的步骤如下：
　　1、添加内容查询部件
　　2、设置查询范围
　　3、导出查询部件文件，.webpart文件
　　4、修改webpart文件中的<property name="CommonViewFields" type="string" >Title,Text;Modified,DateTime</property>配置节，添加你想要显示的栏目
　　5、用SPD打开顶级网站，在右侧的树目录中找到样式库，如下图所示

　　拷贝ContentQueryMain[控制内容显示]和ItemStyle【控制条目显示】一份，重命名为自定义的名称
　　6、修改webpart文件中的<property name="MainXslLink" type="string" >/Style Library/XSL Style Sheets/ContentQueryMain_OUWeb_Bulletin.xsl</property>
            <property name="ItemXslLink" type="string" >/Style Library/XSL Style Sheets/ItemStyle_OUWeb_Bulletin.xsl</property>
　　这两个配置节，样式路径选择为自定义的样式文件。
　　7、保存修改之后的webpart文件，在网站导入这个webpart文件。
　　8、效果出来了。
　　9、以后就是修改xsl样式了，格式化显示。
      
　　
　　在SP的开发过程中，有的时候首页需要一些webpart来显示子网站的内容，显示一个标题，可以链接的，还有tooltip的，开始的时候我用content qeury web part ，后来发现他默认只能显示标题，什么时间啊，用户名啊，什么的都不能显示。
　　过一段时间发现，我错误了，那个控件还是很强大的，详见微软的官网http://msdn.microsoft.com/en-us/library/bb447557.aspx。
　　内容需要编辑ItemStyle.xsl，标题格式化需要编辑ContentQueryMain.xsl中的，下面是我添加的一个标题
　　
　　

ContentQueryMain
<xsl:template name="OuterTemplate">
      <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
      <xsl:variable name="RowCount" select="count($Rows)" />
      <xsl:variable name="IsEmpty" select="$RowCount = 0" />
            <table id="cbqwp" cellspacing="0" cellpadding="0" border="1" bordercolor="#0099FF" class="cbq-layout-main" title="论坛热帖">
                <tr style="font-size:14px;background-color:#0099FF"><a href="#" style="font-weight:bolder;">论坛热帖</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">More</a>
                     <xsl:if test="$FeedEnabled = 'True'">
                        <div class="cqfeed">
                            <xsl:variable name="FeedUrl1" select="concat($SiteUrl,$FeedPageUrl,'xsl=1&amp;web=',$WebUrl,'&amp;page=',$PageId,'&amp;wp=',$WebPartId)" />
                            <a href="{cmswrt:RegisterFeedUrl( $FeedUrl1, 'application/rss+xml')}"><img src="\_layouts\images\rss.gif" border="0" alt="{cmswrt:GetPublishingResource('CbqRssAlt')}"/></a>
                        </div>
                        </xsl:if>
                </tr>
                <tr>
                  <xsl:choose>
                        <xsl:when test="$IsEmpty">
                           <xsl:call-template name="OuterTemplate.Empty" >
                                 <xsl:with-param name="EditMode" select="$cbq_iseditmode" />
                           </xsl:call-template>
                        </xsl:when>
                        <xsl:otherwise>
                           <xsl:call-template name="OuterTemplate.Body">
                                 <xsl:with-param name="Rows" select="$Rows" />
                                 <xsl:with-param name="FirstRow" select="1" />
                                 <xsl:with-param name="LastRow" select="$RowCount" />
                            </xsl:call-template>
                        </xsl:otherwise>
                  </xsl:choose>
                </tr>
            </table>
         
    </xsl:template>
　　
　　效果图如下

　　
　　可是不是很理想，More应该在右面，还有啊，内容是三栏，上面如何也弄三栏和下面的配合的，还需要研究啊？那位知道的话，可以告诉我啊，还有啊，还可以弄幻灯片效果，是http://www.cnblogs.com/ghner这位老兄说的，可是他没有给出任务信息，http://www.cnblogs.com/ghner/archive/2008/06/16/1212775.html就是这个地址的效果，知道的老兄可以告知一下。
　　刚才调整了一下ContentQuery.xsl文件中一些代码的位置，标题就好看多了，见下图，大家可以参看下面的代码，自己做一些修改，实现更强大的控制。
　　刚开始我是在原来的table上面添加了一行，用来显示标题，现在我是添加一个table在原来的table上面，好像好多了。
　　还有一点要注意，如果你修改自带的ContentQueryMain，全部的CQWP都会有影响。要想消除这种影响，就要先将原有的拷贝一份，该一个名字，然后再修改。最后在.webpart文件中引用自定义的ContentQueryMain,格式为
　　<property name="MainXslLink" type="string">/Style Library/XSL Style Sheets/MyCustomCQMain.xsl</property>
　　MainXslLink为原来的一个属性，原来的值为空，修改为上面的模式，MyCustomCQMain.xsl是自定义的文件名，还有其他的itemstyle，如果有需要的话，也最好自定义一些吧，这样就对原来的没有影响了。
   
　　代码如下
　　

ContentQueryMain.xsl中的部分
<xsl:template name="OuterTemplate">
      <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
      <xsl:variable name="RowCount" select="count($Rows)" />
      <xsl:variable name="IsEmpty" select="$RowCount = 0" />
         <table id="cbqwp" cellspacing="0" cellpadding="0" border="1" bordercolor="#0099FF" class="cbq-layout-main" title="论坛热帖">
                <tr style="font-size:14px;background-color:#0099FF">
                  <td><a href="#" style="font-weight:bolder; font-size:14px;font-weight:bolder;">论坛热帖</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     </td>
                     <td>
                         <a href="#" style="font-weight:bolder; font-size:14px;font-weight:bolder;">More</a>
                     </td>
                     <td>
                         <xsl:if test="$FeedEnabled = 'True'">
                            <div class="cqfeed">
                              <xsl:variable name="FeedUrl1" select="concat($SiteUrl,$FeedPageUrl,'xsl=1&amp;web=',$WebUrl,'&amp;page=',$PageId,'&amp;wp=',$WebPartId)" />
                              <a href="{cmswrt:RegisterFeedUrl( $FeedUrl1, 'application/rss+xml')}"><img src="\_layouts\images\rss.gif" border="0" alt="{cmswrt:GetPublishingResource('CbqRssAlt')}"/>RSS</a>
                            </div>
                            </xsl:if>
                     </td>
                </tr>
      </table>
               
            <table id="cbqwp" cellspacing="0" cellpadding="0" border="1" bordercolor="#0099FF" class="cbq-layout-main" title="论坛热帖">
                <tr>
                  <xsl:choose>
                        <xsl:when test="$IsEmpty">
                           <xsl:call-template name="OuterTemplate.Empty" >
                                 <xsl:with-param name="EditMode" select="$cbq_iseditmode" />
                           </xsl:call-template>
                        </xsl:when>
                        <xsl:otherwise>
                           <xsl:call-template name="OuterTemplate.Body">
                                 <xsl:with-param name="Rows" select="$Rows" />
                                 <xsl:with-param name="FirstRow" select="1" />
                                 <xsl:with-param name="LastRow" select="$RowCount" />
                            </xsl:call-template>
                        </xsl:otherwise>
                  </xsl:choose>
                </tr>
            </table>
         
    </xsl:template>
　　      可以定制的，不过是用到处webpart文件，声明要使用的栏目，然后编写xslt，定义显示的格式，可以多列，可以自定义一些东西，不错。
　　在xslt中还可以用函数来处理，格式化时间什么的。有计划以后写一个系列，最近开始学习java web编程，从基础开始学习，居然第一章就是xml、dtd、schema、xsl、xslt，所以才想起了SP中的xsl定义显示的格式。
　　园子里面已经有很多的文章了，我就不写步骤了。留个标记。
　　这位老兄总结的就很不错，谢谢了先。   http://www.cnblogs.com/heavencloud/archive/2009/03/28/1423788.html

<xsl:template name="ForumStyle" match="Row[@Style='ForumStyle']" mode="itemstyle">
      <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
      </xsl:variable>
      <div id="linkitem" class="item link-item">
            <table >
                   <tr>
                     <td width="200px">
                           <xsl:if test="string-length($DisplayTitle) = 0">
                               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@Title}">
                                    <xsl:value-of select="$DisplayTitle"/>
                            </a>
                           </xsl:if>
                           <xsl:if test="string-length($DisplayTitle) &lt;= 10">
                               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@Title}">
                                    <xsl:value-of select="$DisplayTitle"/>
                            </a>
                           </xsl:if>
                           <xsl:if test="string-length($DisplayTitle) &gt; 10">
                               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@Title}">
                                    <xsl:value-of select="substring($DisplayTitle,1,9)"/>
                            </a>
                           </xsl:if>                        
                     </td>
                     <td width="100px">
                           <xsl:value-of select='substring(@Modified,1,4)'></xsl:value-of>
                     </td>
                     <td align="right">回复数量:
                           <xsl:value-of select="@ItemChildCount"/>   
                     </td>
                   </tr>
         </table>
            
      </div>
    </xsl:template>　　
　　
　　下面是我从网上找到的一些资料，记录下来吧。
　　http://blogs.msdn.com/ecm/archive/2006/10/25/configuring-and-customizing-the-content-query-web-part.aspx
　　http://www.heathersolomon.com/blog/articles/customitemstyle.aspx
　　

ItemStyle1
/* Item Styles - Store in a CSS file or the master page file*/      
.S2StyleImage {
    border-bottom: 1px rgb(251,230,187) solid;
    padding: 5px 7px 10px 0px;
    }
.S2StyleTitle {
    padding-top: 10px;
    }
.S2StyleTitle a, .S2StyleTitle a:link, .S2StyleTitle a:visited, .S2StyleTitle a:hover {
    font-weight: bold;
    font-size: 1.2em;
    }
.S2StyleDescription {
    padding: 5px 0px 10px 0px;
    border-bottom: 1px rgb(251,230,187) solid;
    }
.S2StyleBorder {
    border-bottom: 2px rgb(251,230,187) solid;
    }



<xsl:template name="S2Article_ShowImageTitleBody" match="Row[@Style='S2Article_ShowImageTitleBody']" mode="itemstyle">
      <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
      </xsl:variable>
      
      <xsl:variable name="bodyContent">
            <xsl:call-template name="removeMarkup">
                <xsl:with-param name="string" select="@PublishingPageContent"/>
            </xsl:call-template>
      </xsl:variable>
                        
       <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                   <td class="S2StyleTitle" colspan="2">
                  <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>   
                        <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                        <xsl:value-of select="$DisplayTitle"/>
                        </a>
                </td>
            </tr>
            <tr class="S2StyleBorder">
               <xsl:if test="string-length($SafeImageUrl) != 0">
                  <td class="S2StyleImage">
                        <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                            <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                        </a>
                  </td>
                </xsl:if>
                <td class="S2StyleDescription" valign="top">
                   <xsl:value-of select="substring($bodyContent,1,100)"/> (<a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">more</a>)
                </td>
            </tr>
      </table>
</xsl:template>   

<!-- Remove Markup from escaped page content - Call function in the style -->
<xsl:template name="removeMarkup">
    <xsl:param name="string" />
    <xsl:choose>
    <xsl:when test="contains($string, '&lt;')">
      <xsl:variable name="nextString">
            <xsl:call-template name="removeMarkup">
            <xsl:with-param name="string" select="substring-after($string, '&gt;')" />
            </xsl:call-template>
      </xsl:variable>
    <xsl:value-of select="concat(substring-before($string, '&lt;'), $nextString)" />
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$string" />
    </xsl:otherwise>
    </xsl:choose>
</xsl:template>


　　
　　在显示富文本内容的时候，也就是html内容的时候，还可以去除html标记中的<br>之类的东西

ItemStyle2
/* Item Styles - Store in a CSS file or the master page file*/      
.S2StyleImage {
    border-bottom: 1px rgb(251,230,187) solid;
    padding: 5px 7px 10px 0px;
    }
.S2StyleTitle {
    padding-top: 10px;
    }
.S2StyleTitle a, .S2StyleTitle a:link, .S2StyleTitle a:visited, .S2StyleTitle a:hover {
    font-weight: bold;
    font-size: 1.2em;
    }
.S2StyleDescription {
    padding: 5px 0px 10px 0px;
    border-bottom: 1px rgb(251,230,187) solid;
    }
.S2StyleBorder {
    border-bottom: 2px rgb(251,230,187) solid;
    }



<xsl:template name="S2Article_ShowImageTitleDescrip" match="Row[@Style='S2Article_ShowImageTitleDescrip']" mode="itemstyle">
      <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
      </xsl:variable>
      <xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
      </xsl:variable>
      <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                   <td class="S2StyleTitle" colspan="2">
                  <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>   
                        <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                        <xsl:value-of select="$DisplayTitle"/>
                        </a>
                </td>
            </tr>
            <tr class="S2StyleBorder">
               <xsl:if test="string-length($SafeImageUrl) != 0">
                  <td class="S2StyleImage">
                        <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                            <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                        </a>
                  </td>
                </xsl:if>
                <td class="S2StyleDescription" valign="top">
                     <xsl:value-of select="@Description" />
                </td>
            </tr>
      </table>
</xsl:template>

<!-- Remove Markup from escaped page content - Call function in the style -->
<xsl:template name="removeMarkup">
    <xsl:param name="string" />
    <xsl:choose>
    <xsl:when test="contains($string, '&lt;')">
      <xsl:variable name="nextString">
            <xsl:call-template name="removeMarkup">
            <xsl:with-param name="string" select="substring-after($string, '&gt;')" />
            </xsl:call-template>
      </xsl:variable>
    <xsl:value-of select="concat(substring-before($string, '&lt;'), $nextString)" />
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$string" />
    </xsl:otherwise>
    </xsl:choose>
</xsl:template>


　　

查看完整版本: sharepoint中控制的content query web part 控件的显示样式的xslt