上一次我们复制了默认的编辑模版,作为我们的romove模版的原始内容。因此,它最初的样子和编辑模版类似。
Remove模版(看起来和Edit模版一样)
现在,我们需要对其进行一些修改:
1.我们会继续延续前文中的做法,通过颜色编码的主题样式来区分不同的状态,将remove标识为红色。
2.由于我们是删除记录,我们希望用户更改的唯一的栏就是Effective Data ,该值将在删除前记录到审计列表中 。
3. 有两个原因,我们会删除正式员工的记录:辞职或辞退。所以,我们希望有两个“保存”按钮,分别标记辞职和辞退 。
4. (可选)如果生效日期是在未来,我们可能希望将其写入审计列表,但随后启动一个工作流,等到了生效日期后再执行删除列表项操作。
如果我们想在设计视图中切换到新的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="" style="border-left:1px black solid; padding-left:3px"> <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