SharePoint：扩展DVWP - 第28部分：完善Remove模版

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

posted @ 2010-09-30 21:18 Sunmoonfire 阅读(1217) 评论(0) 编辑收藏举报

刷新页面返回顶部

SharePoint：扩展DVWP - 第28部分：完善Remove模版

步骤

公告