a6266318 发表于 2015-9-28 13:09:32

SharePoint:扩展DVWP

  上一次我们复制了默认的编辑模版,作为我们的romove模版的原始内容。因此,它最初的样子和编辑模版类似。

  Remove模版(看起来和Edit模版一样)
  现在,我们需要对其进行一些修改:
  1.我们会继续延续前文中的做法,通过颜色编码的主题样式来区分不同的状态,将remove标识为红色。
  2.由于我们是删除记录,我们希望用户更改的唯一的栏就是Effective Data ,该值将在删除前记录到审计列表中 。
   3. 有两个原因,我们会删除正式员工的记录:辞职或辞退。所以,我们希望有两个“保存”按钮,分别标记辞职和辞退 。
   4. (可选)如果生效日期是在未来,我们可能希望将其写入审计列表,但随后启动一个工作流,等到了生效日期后再执行删除列表项操作。
  如果我们想在设计视图中切换到新的remove模板 ,会发现它并不在下拉框中。

没有Remove模板这个选择
  所以,当我们正在编辑页面时,我们需要通过交换dvt_1.rowedit和dvt_1.rowremove模板的名称来欺骗一下SPD。 无需修改我们从默认模板拷贝的任何其他副本的内容。 从:



<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" />
<tr>
. . .
</tr>
</xsl:template>
<xsl:template name="dvt_1.rowremove">
<xsl:param name="Pos" />
<tr>
. . .
</tr>
</xsl:template>

  ...改为...



<xsl:template name="dvt_1.rowremove">
<xsl:param name="Pos" />
</xsl:template>
<xsl:template name="dvt_1.rowremove"><tr>
. . .
</tr>
</xsl:template>
<h3>
<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" />
</xsl:template>
</h3>
<xsl:template name="dvt_1.rowedit"><tr>
. . .
</tr>
</xsl:template>

步骤
  让我们分析一下想要进行的修改,然后一步一步的实现。
  1. 继续实现颜色编码
  在代码窗格中,我们要把外框修改为红色,这样就可以为当前的工作状态提供一条可视化的线索。 如果你是沿着之前的两篇文章一路走下来的话,应该已经有相应的css类了,通过它可以实现红色边框:



.dl-l {border-left:medium red ridge;}
.dl-r {border-right:medium red ridge;}
.dl-t {border-top:medium red ridge;}
.dl-b {border-bottom:medium red ridge;}

  只在remove模板中,将每个ed-修改为dl-,然后我们回到设计窗格中,切换到编辑模板 (现在实际上显示的是我们remove模板 ),看一下现在的界面效果:

  看起来就像编辑模板 ,除了将蓝色边框换成了红色
2.只把生效日期字段保留为可编辑
  很简单。鼠标悬停在“Worker”控件上并修改“Format as:”为Label。在生效日期(Effective Date)之外的所有其他控件上重复该操作。 改为Label后 ,外观看起来像文本一样,但仍允许我们从工作流中访问该控件。
  

  在设计窗格中修改显示属性
  [ 提醒:当我们在代码窗格修改任何内容后,再次点击设计窗格,它将恢复到默认值模板,我们将不得不再次在数据视图预览中选择编辑模板。 但是,如果我们是在设计窗格中修改Format As属性 ,就不会有这种问题。]

只有Effective Date是可编辑的,所有的字段都可以通过jQuey或工作流引用
3. 使两个不同的保存按钮
  就像我们之前所做的一样,我们会通过复制现有的保存按钮来新建一个按钮,然后按照我们的要求进行修改。这时我们会发现,按钮是由单独的模板来渲染的,取决于我们当前所处的Mode。



<xsl:choose>
<xsl:when test="$Mode = 'edit'">
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="" align="center">
<a href="javascript: {code}">Save</a>
</td>
</tr>
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="" align="center">
<a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a>
</td>
</tr>
</xsl:when>
<xsl:when test="$Mode = 'insert'">
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="nowrap" align="center">
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">Save</a>
</td>
</tr>
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="nowrap" align="center">
<a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a>
</td>
</tr>
</xsl:when>
<xsl:otherwise>
<tr>
<td class="ms-vb" width="1%" nowrap="">
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">update</a>
</td>
<td class="ms-vb" width="1%" nowrap="">
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_removekey={',$KeyValue,'}'))}">remove</a>
</td>
</tr>
</xsl:otherwise>
</xsl:choose>

  现在,我们只需要复制一个按钮,并重命名。 我们将随后设置其操作:



<xsl:choose>
<xsl:when test="$Mode = 'edit'">
. . .
</xsl:when>
<xsl:when test="$Mode = 'remove'">
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="" align="center">
<a href="javascript: {code}">Terminated</a>
</td>
</tr>
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="" align="center">
<a href="javascript: {code}">Resigned</a>
</td>
</tr>
<tr>
<td class="ms-buttonactivehover" width="1%" nowrap="" align="center">
<a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a>
</td>
</tr>
</xsl:when>
<xsl:when test="$Mode = 'insert'">
. . .
</xsl:when>
<xsl:otherwise>
. . .
</xsl:otherwise>
</xsl:choose>

  哦,等等! 这意味着我们需要在某个地方设置一下Mode。
  看一下上面的代码,我们会看到Mode是dvt_1.automode模版的一个参数:



<xsl:template name="dvt_1.automode">
<xsl:param name="KeyField" />
<xsl:param name="KeyValue" />
<xsl:param name="Mode" />
<xsl:param name="Pos" />

  所以,我们只需要在从dvt_1.rowremove模版中调用该模版时传递“remove”给Mode即可。 但请记住 ,我们目前将它命名成了dvt_1.rowedit。 所以请确保编辑是正确那一个:



<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" />
<tr>
<td class="ms-vb dl-l dl-t">
<asp:Label runat="server" id="ff19{$Pos}" text="{@Title}" {code} /></td>
<td class="ms-vb dl-t">
<asp:Label runat="server" id="ff20{$Pos}" text="{@Positions}" {code} /></td>
<td class="ms-vb dl-t">
<asp:Label runat="server" id="ff22{$Pos}" text="{@WorkShift}" {code} /></td>
<td class="ms-vb dl-r dl-t">
<asp:Label runat="server" id="ff23{$Pos}" text="{@FTE}" {code} /></td>
</tr>
<tr>
<td class="ms-vb dl-b dl-l">
<strong>Site/Department: </strong><br />   
<asp:Label runat="server" id="ff18{$Pos}" text="{@LocDept}" {code} /></td>
<td class="ms-vb dl-b">
<strong>Group: </strong><br />   
<asp:Label runat="server" id="ff21{$Pos}" text="{@Group12}" {code} /></td>
<td class="ms-vb dl-b">
<strong>Effective Date: </strong><br />
<SharePoint:FormField runat="server" id="ff17{$Pos}" controlmode="Edit" fieldname="EffDate" itemid="{@ID}" {code} /></td>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb dl-b dl-r" width="1%" nowrap="">
<xsl:call-template name="dvt_1.automode">
<xsl:with-param name="KeyField">ID</xsl:with-param>
<xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" />
<xsl:with-param name="Mode">remove</xsl:with-param>
<xsl:with-param name="Pos" select="$Pos"/>
</xsl:call-template>
</td>
</xsl:if>
</tr>
</xsl:template>

  
      在倒数第7行里,我们看到,可以传递“remove”给dvt_1.automode 的Mode参数
  
  好了,这一篇文章真的很长了...让我们先休息一下,下一次,我们将修改这两个按钮背后的操作。 但至少现在我们可以看到它的外观了(记住:要查看remove模板,需要点击update按钮,因为我们已经换了名字):

  修改好外观的remove模版及其按钮(虽然还没实现功能)
  
  下一次:现在,我们的备用编辑模板构建出来了,接下来我们将更新Terminated和Resigned按钮的表单操作,关联工作流,从而继续我们的扩展DVWP之旅 。
  
  参考资料
  SharePoint:Extending the DVWP-Part 28:Massage the Remove Template
页: [1]
查看完整版本: SharePoint:扩展DVWP