SharePoint：扩展DVWP

a6266318

　　上一次我们复制了默认的编辑模版，作为我们的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