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