使用 HTML 表單網頁組件篩選並顯示其他網頁組件中的資料

重要:  本文係由機器翻譯而成,請參閱免責聲明。本文的英文版本請見這裡,以供參考。

您可以使用 HTML 表單網頁組件連接其他網頁組件的資料,或是將資料傳送至其他網頁組件 (如清單檢視網頁組件)。

本文內容:

使用表單網頁組件

新增網頁組件至頁面

HTML 表單網頁組件連線到另一個網頁組件

自訂的 HTML 表單網頁組件

自訂預設 HTML 表單網頁組件

使用多行文字方塊

使用 [選項] 按鈕

使用下拉式清單的選項

使用核取方塊

設定網頁組件的通用屬性

外觀

版面配置

進階

使用表單網頁組件

您可以使用 HTML 表單網頁組件連接其他網頁組件,或是將資料傳送至其他網頁組件。例如,您可以使用預設的 HTML 表單網頁組件輸入區域名稱、將值傳送至客戶資料的清單檢視網頁組件,以及依區域篩選資料。您也可以自訂 HTML 表單網頁組件,讓使用者能夠從下拉式清單中選取區域名稱及執行其他工作。您可以在 HTML 表單網頁組件中使用文字方塊、下拉式清單、多行文字方塊、核取方塊或選項按鈕。

將欄位連接至其他網頁組件的方式,取決於其他網頁組件如何定義其網頁組件連線的用法。

表單上雖然可有多項元素 (文字方塊、選項按鈕等等),但只有一個欄位可以連接至清單檢視網頁組件。不同的欄位則可同時連接至不同的網頁組件。例如 HTML 表單網頁組件可使用文字方塊與一組選項按鈕。文字方塊可以連接至某個清單檢視網頁組件,而選項按鈕則可連接至其他網頁組件。當使用者按一下 [開始] 按鈕時,會隨即根據 HTML 表單網頁組件中所輸入的資訊,篩選這兩項清單檢視網頁組件。

若網頁組件可以接受多項參數,您也可以將 HTML 表單網頁組件中的兩個或多個欄位連接至該網頁組件。在此情況下,您需要相容於 SharePoint 的網站設計程式 (如 SharePoint Designer 2010) 才可進行連線。

頁面頂端

新增網頁組件至頁面

您至少要加入網站預設的 <網站名稱> 成員 SharePoint 群組取得其權限,才可編輯頁面。

  1. 在頁面上,按一下功能區中的 [頁面] 索引標籤,然後按一下 [編輯] 命令。

    [編輯] 索引標籤中的 [編輯] 命令

    若 [編輯] 命令停用,這表示您不具有編輯頁面的權限。請連絡系統管理員。

  2. 在頁面中要新增網頁組件的位置上按一下,然後按一下 [插入] 索引標籤的 [網頁組件]

    網頁組件命令

  3. 選取 [類別] 下的類別 (例如 [清單和組件庫]),再選取要新增至頁面的網頁組件 (例如 [宣告]),然後按一下 [新增]

    網頁組件選擇器

  4. 當您選取某項網頁組件時,[關於網頁組件] 會顯示該網頁組件的資訊。

  5. 當您完成頁面編輯之後,請按一下 [頁面] 索引標籤,然後按一下 [儲存並關閉]

頁面頂端

將 HTML 表單網頁組件連接至另一個網頁組件

若要使用 HTML 表單網頁組件,您將其連線所能接收的值,透過網頁組件連線,例如清單檢視網頁組件的另一個網頁組件。必須先在 HTML 表單網頁組件的相同頁面上的網頁組件中顯示您要篩選的清單及您要篩選的欄。新增 HTML 表單網頁組件至頁面的相關資訊,請參閱新增網頁組件至頁面

  1. 瀏覽至內含要篩選之網頁組件的頁面。

  2. 按一下功能區的 [頁面] 索引標籤,然後按一下 [編輯] 命令。

    若 [編輯] 命令停用,這表示您不具有編輯頁面的權限。請連絡系統管理員。

  3. 指向 HTML 表單網頁組件,然後按一下向下鍵,再按一下 [連線] 指向 [提供表單值至],最後再按一下要連結的網頁組件名稱。

  4. 按一下 [選擇連線] 對話方塊中的 [設定連線] 索引標籤。

  5. [連線類型] 功能表中,選取符合 HTML 表單網頁組件資訊的欄位。

附註: 欄位必須有相同的名稱,也沒有為相同的資料類型。寄件者 HTML 表單網頁組件的值是文字值

  1. 按一下 [完成],然後按一下頁面上方的 [結束編輯模式]

預設您可以在文字方塊中輸入文字,然後按一下 [開始] 或按 ENTER 鍵。其他網頁組件只會顯示符合輸入文字的資料。若要清除文字方塊以輸入新的文字,請選取目前的文字並予以刪除。

頁面頂端

自訂 HTML 表單網頁組件

您可以使用 [HTML 表單網頁組件] 工具窗格的 [原始檔編輯器],或相容於 SharePoint 的網站設計程式 (如 SharePoint Designer 2010) 自訂 HTML 表單網頁組件。您可以不使用標準的文字方塊,而改用選項按鈕、核取方塊、多行文字方塊及清單方塊。您也可以新增標籤,並指定預設值。

自訂 HTML 表單網頁組件時,請牢記以下重點:

  • 只可使用一個 [開始] 按鈕 (此按鈕使用 INPUT 元素) 將資料傳送至其他網頁組件。

  • HTML 表單網頁組件會使用 FORM 元素。有某些 HTML 元素無法在 FORM 元素 (包括 HTML、BODY 及 FORM 元素) 內使用。

  • 所有表單欄位名稱都必須是唯一的。每個名稱值都會用來連接至您要連接之網頁組件的相對欄名稱。

若要自訂表單網頁組件,可使用 [原始檔編輯器] 按鈕顯示 [文字編輯器] 對話方塊,然後再修訂或新增 HTML 原始程式碼。

附註: HTML 表單網頁組件只提供資料給另一個可連線的網頁組件,無法取得資料從另一個可連線的網頁組件。比方說,您無法為詳細資料表單使用 HTML 表單網頁組件,顯示的資料列。

頁面頂端

自訂預設的 HTML 表單網頁組件

若要自訂預設的 HTML 表單網頁組件,請執行下列動作:

  1. 從網頁顯示在功能區] 的 [HTML 表單網頁組件中,按一下 [ 編輯] 索引標籤,然後按 [ 編輯] 命令。

  2. 指向 [HTML 表單網頁組件,按一下向下箭號,再按一下編輯網頁組件

  3. 在 [工具] 窗格中,按一下 [原始檔編輯器] 按鈕。

  4. [文字項目] 對話方塊隨即開啟,並會顯示預設的 HTML 程式碼。

為了使程式碼更易於閱讀及修改,請如下所示在文字中插入換行字元進行斷行:

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="text" name="T1"/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

有好幾種方式可以變更第一項 INPUT 元素,包括變更欄位名稱、新增標籤至欄位,或新增預設值。

屬性

描述

欄位名稱

表單網頁組件中的預設文字] 方塊的名稱為T1。這是出現在 [設定連線] 對話方塊中的名稱。若要指定的欄位有意義的名稱,輸入取代T1的新名稱。請勿移除括住。

欄位標籤

您可以在表單欄位的前後新增標籤文字。輸入文字時,請勿加上引號

預設值

您可以新增預設值至文字區域欄位。使用者可以按一下 [開始] 按鈕接受該值,或以自己的輸入加以覆寫。若要新增預設值,請使用值屬性。

例如,若想要提供更實用的名稱、新增預設值及新增標籤,可以執行下列動作:

Region: <input type="text" name="Region" value="India"/>

您可以藉由變更按鈕的名稱變更第二項 INPUT 元素,如下列範例所示:

<input type="button" value="SUBMIT" onclick="javascript:_SFSUBMIT_"/>

您也可以在 DIV 元素前後新增其他 HTML 元素。例如,若要讓使用者能夠快速地重新整理頁面及重設 FORM 元素,最簡單實用的方法就是在 DIV 元素之後新增現行頁面的錨點標籤。例如:

<br/>
<a href="http://contoso/SitePages/CustByRegion.aspx">Refresh</a>

重要: 不會變更文字編輯器] 對話方塊中的其他 HTML 程式碼。動態 HTML 表單網頁組件會在執行階段建立連線到其他網頁組件建立指令碼處理常式。請勿修改onkeydownonclick事件程式碼,或您不小心可能會中斷 HTML 表單網頁組件。

頁面頂端

使用多行文字方塊

TEXTAREA 元素可定義多行文字輸入控制項。ROWS 屬性可指定文字欄位中所顯示的行數。COLS 屬性可指定字元文字區域的寬度。下列範例會顯示具有 5 行、30 個字元寬的文字方塊。當使用者在方塊中輸入文字時,文字會在 30 個字元之後折行。

<textarea name="Region" rows=5 cols=30></textarea>

提示: 請確定沒有空間原始程式碼緊接右角括弧 (>)。

頁面頂端

使用選項按鈕

選項按鈕提供使用者不可同時成立的選擇。下列範例會顯示三個選項按鈕。請為每個選項按鈕指定相同的名稱。習慣上會在每個按鈕後面加上標籤。若要分別在不同的行上格式化各選項按鈕,請使用 BR 元素。

<input type="radio" name="Region" value="India"/> India<BR/>
<input type="radio" name="Region" value="USA"/> USA<BR/>
<input type="radio" name="Region" value="Spain"/> Spain<BR/>

頁面頂端

使用下拉式選擇清單

您如有許多選擇皆不可同時成立,可考慮透過 SELECT 元素使用下拉式清單方塊。每個選項在清單中皆為獨立的選擇,但使用者只可選取一項。出現在 OPTION 元素之右角括弧後方的文字,即會在下拉式清單中所要顯示的內容。

<select name="Region">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Spain"> Spain </option>
</select>

若要提供預設值 (如 Spain),請執行下列動作:

<option value="Spain" selected="selected"> Spain </option>

頁面頂端

使用核取方塊

您如有許多可以同時成立的選擇,可以使用核取方塊。每個選項皆為獨立的核取方塊,使用者可以任選一項或全部。使用此選項之網頁組件的網頁組件連線必須能夠接受多項參數。

<input type="checkbox" name="region1" value="India"/> India<BR/>
<input type="checkbox" name="region2" value="USA"/> USA<BR/>
<input type="checkbox" name="region3" value="Spain"/> Spain<BR/>

若要提供預設值 (如 Spain),請執行下列動作:

<input type="checkbox" name="region3" value="Spain" checked="checked"/> Spain<BR/> 

頁面頂端

設定網頁組件的通用屬性

網頁組件共用一組通用屬性以控制其外觀、版面配置及進階特性。您可以在工具窗格中變更網頁組件屬性。

附註: 工具窗格中所顯示的通用網頁組件屬性,可能會與本節所述者不盡相同,原因包括:

  • 您必須有適當的權限,才能夠在工具窗格中看到 [進階] 區段。

  • 網頁組件開發人員可能針對特定的網頁組件選擇不顯示一項或多項通用屬性,或選擇另行建立及顯示工作窗格之 [外觀][版面配置] 與 [進階] 區段中所列之屬性外的其他屬性。

  • 某些權限與屬性設定可能會停用或隱藏網頁組件的屬性。

外觀

屬性

描述

標題

會指定網頁組件的標題,這會出現在網頁組件標題列中。

高度

會指定網頁組件的高度。

寬度

會指定網頁組件的寬度。

組件區塊狀態

會指定當使用者開啟頁面時,頁面上是否要顯示整個網頁組件。組件區塊狀態預設會設為 [一般],亦即顯示整個網頁組件。當狀態設定為 [最小化] 時,只會顯示標題列。

組件區塊類型

會指定是否顯示網頁組件的標題列和框線。

版面配置

屬性

描述

隱藏

會指定當使用者開啟頁面時,是否要顯示網頁組件。若選取此核取方塊,則網頁組件只會在您設計頁面時出現,且標題後會加上 (隱藏)

若想要透過網頁組件連線,使用網頁組件提供資料給另一個網頁組件,但不想要顯示該網頁組件,則可隱藏網頁組件。

方向

會指定網頁組件內容的文字方向。例如,阿拉伯文是從右至左的語言,而英文與大多數其他歐洲語言則是從左至右的語言。只有某些類型的網頁組件才可以使用此設定。

區域

會指定網頁組件所在的頁面區域。

附註: 當您沒有權限可修改區域時,清單方塊中就不會列出頁面上的區域。

區域索引

會指定當區域包含一個以上的網頁組件時,網頁組件在區域中的位置。

若要指定順序,請在文字方塊中輸入正整數。

區域中的網頁組件若是由上而下依序排列,值 1 即表示網頁組件會出現在區域的頂端。區域中的網頁組件若是由左而右依序排列,值 1 即表示網頁組件會出現在區域的左側。

例如,當您將網頁組件新增至由上而下排列的空白區域時,區域索引為 0。當您將第二個網頁組件新增到該區域的底端時,其區域索引為 1。若要將第二個網頁組件移至該區域的頂端,請輸入 0,然後為第一個網頁組件輸入 1

附註: 區域中的每個網頁組件都必須有唯一的區域索引值。因此,變更目前網頁組件的區域索引值,也會變更該區域中其他網頁組件的區域索引值。

進階

屬性

描述

允許最小化

會指定網頁組件是否可以最小化。

允許關閉

會指定網頁組件是否可從頁面移除。

允許隱藏

會指定網頁組件是否可以隱藏。

允許區域變更

會指定網頁組件是否可以移動到不同的區域。

允許連線

會指定網頁組件是否可以與其他網頁組件進行連結。

允許在個人檢視中編輯

會指定網頁組件屬性是否可以在個人檢視中進行修改。

匯出模式

會指定允許此網頁組件匯出之資料層級。視設定之不同,可能無法使用此設定。

標題 URL

會指定內含網頁組件其他相關資訊之檔案的 URL。當您按一下網頁組件標題時,檔案會顯示在另一個瀏覽器視窗中。

描述

會指定當您將滑鼠指標移至網頁組件標題或網頁組件圖示上方時,所出現的工具提示。當您使用工具窗格之 [尋找網頁組件] 功能表中的 [搜尋] 命令搜尋網頁組件時,也會用到此屬性的值。

說明 URL

會指定內含網頁組件相關說明資訊之檔案的位置。當您按一下 [網頁組件] 功能表中的 [說明] 命令時,說明資訊會顯示在另一個瀏覽器視窗中。

說明模式

會指定瀏覽器顯示網頁組件說明內容的方式。

選取下列其中一項:

強制回應:會開啟另一個瀏覽器視窗 (若瀏覽器有此功能)。使用者回到網頁前,必須先關閉視窗。

非強制回應:會開啟另一個瀏覽器視窗 (若瀏覽器有此功能)。使用者回到網頁之前,不一定要先關閉視窗。此為預設值。

導覽:在目前的瀏覽器視窗中開啟網頁。

附註: 即使自訂 Microsoft ASP.NET 網頁組件支援此屬性,預設 SharePoint 說明主題只會在另一個瀏覽器視窗中開啟。

目錄圖示圖像 URL

會指定內含在網頁組件清單中用做網頁組件圖示圖像之檔案的位置。圖像大小必須為 16 x 16 像素。

標題圖示圖像 URL

會指定內含用於網頁組件標題列中圖像之檔案的位置。圖像大小必須為 16 x 16 像素。

匯入錯誤訊息

會指定萬一匯入網頁組件發生問題時所要顯示的訊息。

頁面頂端

附註: 機器翻譯免責聲明︰本文係以電腦系統翻譯而成,未經人為介入。Microsoft 提供此等機器翻譯旨在協助非英語系使用者輕鬆閱讀 Microsoft 產品、服務及技術相關內容。基於本文乃由機器翻譯而成,因此文中可能出現詞辭、語法、文法上之錯誤。

擴展您的技能
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×