SharePoint：擴充DVWP – 第22部分：jQuery實現基於其他欄位自動建立標題

文章目錄

• PreSaveAction()前來支援
• 隱藏標題列
• 串連欄位建立標題

當我們填充關係列表資料時，要保證網站欄沒有設成必填項，這樣才能在資料工作表檢視中一次填充一欄資料。當時我們也討論了在這種情況下通過工作流程來自動填寫標題會遇到的問題。我們甚至無法通過一個計算欄來解決該問題，因為查閱項類型的欄在計算欄設定頁面上是不可見的。

但是，當我們需要維護這個列表時會是怎麼一個情況？

如果你是用一個完整的資料清單一次性的對某個下拉框列表進行更新，那麼你要做的事和前面討論的一樣。但如果你是一條資料一條資料的添加的話，自動建立標題內容就會對你很有協助了，可以避免機械性的勞動。

PreSaveAction()前來支援

當然，還是要用到jQuery...

假設我們的關係列表的NewForm.aspx（也就是添加一條關係的頁面）如所示：

這裡兩個網站欄設定為必填項，而標題列設定為可選項

我們要在做兩件事情都是在jQuery中進行，因此無需unghost該頁面：

1、隱藏標題列 - 我們將通過jQuery而不是列表設定來實現。因為我們並不是要它始終被隱藏；只是需要在這塊裡隱藏即可。因為接下來我們要...

2、在使用者點確定時，把兩個網站欄的選擇項連起來，然後將其作為標題進行儲存。

這裡是具體實現功能的jQuery代碼，稍後我會進行解釋：

<script src="/Asset/js/jquery.js" type="text/javascript"></script><script language="javascript" type="text/javascript">  $(document).ready(function() {      $("input[title=標題]").parent().parent().parent().hide();  });  function PreSaveAction() {      var txtCountries=$("select[title=Countries] option[selected]").text();//alert(txtCountries);      var txtStates = $("input[title=States]").val();      $("input[title=標題]").val(txtCountries+ ' - ' + txtStates );      return true;  };</script>

隱藏標題列

在$(document).ready(function() {})裡啟動並執行代碼塊會在頁面載入完成後運行。下面的HTML來源於在該頁面上“查看原始碼”，顯示了當頁面載入完成後的樣子：

<TR><TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>標題</nobr></H3></TD><TD valign="top" class="ms-formbody" width="400px"><!-- FieldName="標題" FieldInternalName="Title" FieldType="SPFieldText"  --><span dir="none"><input name="ctl00$m$g_7ce6f1ae_8fa4_4f07_90cc_035d0c63a180$ctl00$ctl04$ctl00$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_m_g_7ce6f1ae_8fa4_4f07_90cc_035d0c63a180_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="標題" class="ms-long" /><br></span></TD></TR>

 

這是我們需要隱藏的整個一行內容。最方便的定位到它的方法是通過所資料的資料尋找表單欄位（或文字框）。就是其中<input ... title="標題" .../>標記部分。注意其中的title屬性設定為與其左側TD中的H3的標籤內容相同。

在jQuery裡，我們用類似$("搜尋條件")的文法進行搜尋。因此，這裡就是.$("input[title=標題]")，換句話說就是“尋找title屬性為"標題"的input標記”，這樣找到的正是我們所要的。

接下來，我們向上或著說是向外層尋找HTML標記：

1、我們找到的input標記位於一個span標記內，所以...

2、.parent()會得到span標記，它位於一個TD標記內，所以...

3、.parent()會得到TD標記，它位於一個TR標記內，所以...

4、.parent()會得到TR標記，正是我們要隱藏的，所以...

5、.hide()將其隱藏。

也可以直接使用closest()函數。可以使代碼更簡潔。（closest會首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上尋找父元素，一層一層往上，直到找到匹配選取器的元素。如果什麼都沒找到則返回一個空的jQuery對象。）這是牛人Marc D Anderson在評論中提出的寶貴建議。

直接這麼寫：

$("input[title=標題]").closest("TR").hide();

標題列就被隱藏了；我們會通過編程的方式為其設定值，然後再執行儲存。

串連欄位建立標題

在以前的一篇博文中，我們討論了PreSaveAction()在DVWP中的使用。那時，我們可以實現當點擊一個表單操作鏈結接時，在表單操作被執行前進行一些額外的調用。

對於一個預設的（ListFormWebPart）ghosted頁面，PreSaveAction()會在點擊確定按鈕時自動被調用。也就是說，我們要做的只是往函數裡放代碼就可以了，SharePoint會在提交修改到資料庫之前執行它。

與標題控制項類似，我們也可以通過input標記（或者，選擇項比較少時是select標記）及其title屬性（值為該欄的顯示名稱）尋找另外的兩個下拉框。

因此，對於第一個查閱項控制項：

1、$("select[title=Countries] option[selected]")就可以找到該控制項的被選中項，然後...

2、.text()可以擷取選中項對應的常值內容，我們將其...

3、存在我們建立的一個變數：txtCountries 中

對於第二個查閱項控制項：

1、$("input[title=States]")就可以找到該控制項，然後...

2、.val()可以擷取value屬性的內容，我們將其...

3、存在我們建立的一個變數：txtStates 中 

現在，我們需要再次找到Title控制項：

1、$("input[title=Title]")，但是...

2、接下來不是要擷取其值，而是通過.val()來設定value屬性為...

3、txtCountries+"-"+txtStates

由於這兩個欄都是必填項，只有兩者都有值時頁面才可以儲存。當然在儲存前會首先設定標題的值。

 

Countries被設定為USA，States被設定為New York。jQuery會串連這兩個值產生標題（已隱藏），然後再儲存。

 

可以看到，通過jQuery成功設定了標題的內容！

 

如果願意，你也可以在EditForm.aspx中做同樣的事情，但這樣可能是矯枉過正，依賴於進行修改的頻率以及標題的重要程度而定。

 

下一次：我們將通過一個工作流程來完成相同的工作。

參考資料

SharePoint: Extending the DVWP – Part 22: Creating Title Based on Other Fields with jQuery