SharePoint：擴充DVWP – 第4部分：將DVWP操作鏈結接轉為按鈕

文章目錄

• 把連結轉為按鈕

繼續我們的擴充DVWP系列，首先我需要快速聲明一下，這個系列中有些文章會很短，而有些文章可能會比較長。換句話說，今天的小技巧將會很短，但是...

濃縮的都是精華！

在頭兩篇的文章中，我們把操作鏈結接從預設的位於所有欄的左側移到了最右側。在上一篇中，我們在預設值模板中將本來顯示在兩行中的操作鏈結接改成並排顯示在一行裡。但是我們並沒有在編輯和插入模板中做類似的修改。

一個很好的理由是：

由於編輯和插入模板實際上是用作資料輸入的表單，因此本來在佔用高度上就比預設值模板要多，所以這裡改不改都無所謂了。

但是，還是有需要改進的地方的。如果能夠使其變得更顯眼，像按鈕一樣豈不更好？

我們可以很容易通過CSS來達成目標。

把連結轉為按鈕

1、當滑鼠移至上方在該Web組件上時右上方會顯示一個右角括弧表徵圖，點擊該表徵圖。 在彈出的菜單中的資料檢視預覽下拉式清單方塊中選擇編輯模板。 

 

2、首先要在代碼中找到該連結，可以通過在設計檢視中點隨便的一個儲存或取消連結方便的在程式碼檢視中定位到該連結。

 

3、我們先做一個小的修改，改一下class，並添加align="center"。

從原先的：

<xsl:when test="$Mode = 'edit'">
    <tr>
        <td class="ms-vb" width="1%" nowrap="nowrap">
            <a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">儲存檔案</a>
        </td>
    </tr>
    <tr>
        <td class="ms-vb" width="1%" nowrap="nowrap">
            <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">取消</a>
        </td>
    </tr>
</xsl:when>

 改為：

<xsl:when test="$Mode = 'edit'">
    <tr>
        <td class="ms-vb ms-buttonactivehover" width="1%" nowrap="nowrap" align="center">
            <a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">儲存檔案</a>
        </td>
    </tr>
    <tr>
        <td class="ms-vb ms-buttonactivehover" width="1%" nowrap="nowrap" align="center">
            <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">取消</a>
        </td>
    </tr>
</xsl:when>

儲存後再看一下現在的編輯狀態運行效果...

 

 在插入模板上做同樣的操作就可以把插入狀態下的操作鏈結接也變成按鈕了。

在接下來，我們會討論如何通過PreSaveAction()修改該連結的工作方式。

 

參考資料

SharePoint: Extending the DVWP – Part 4: Turning DVWP Action Links into Buttons