zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    GCD 信号量使用记录
    使用AFNetWorking 上传文件/图片
    iOS 13 使用LaunchScreen.storyboard设置启动图注意事项
    clipsToBounds和masksToBounds的区别?
    react-native 单页面界面横屏(带导航栏的V5.0不支持,V4.0,V3.0支持)
    react-native 5.0导航栏配置
    使用SSZipArchive 注意事项
    iOS 相册照片heic (实况)
    react-native 集成Code-Push的常用命令
    Java基础知识学习02-运算符、循环语句、break、continue
  • 原文地址:https://www.cnblogs.com/Sunmoonfire/p/1838848.html
Copyright © 2011-2022 走看看