使用 SharePoint Designer 自訂資料檢視和表單

資料檢視是 SharePoint 網站資料來源的可自訂即時檢視。SharePoint Designer 2010 會以可延伸標記語言 (XML) 從資料來源擷取資料,並使用可延伸樣式表語言轉換 (XSLT) 顯示或提供資料輸入。資料檢視可以顯示各種不同來源的資料,包括 SharePoint 清單和組件庫、資料庫查詢、XML 文件、Web 服務和伺服器端指令碼。您可以使用 SharePoint Designer 2010 新增及自訂資料檢視。

SharePoint Designer 2010 包括豐富的工具組,可供您用來自訂清單和資料檢視,如下所示。

在 SharePoint Designer 2010 中開啟網站

SharePoint Designer 2010 中的所見即所得 (WYSIWYG) 工具會將可延伸樣式表語言 (XSL) 直接插入頁面,所以您不必懂得 XSL 就能建立功能強大的自訂資料檢視。如果您需要自訂程式碼,隨時都可以在 SharePoint Designer 2010 的程式碼檢視中,直接編輯 XSL。

您有多種不同的方式可以在 SharePoint Designer 2010 中建立檢視和表單:您可以建立與 SharePoint 清單或組件庫關聯的清單檢視、您可以建立與相同清單或不同資料來源關聯的資料檢視、您可以將資料檢視新增至頁面然後插入各個欄位以形成表單,還有其他種種方式。如需深入了解建立檢視和表單,請瀏覽<請參閱>一節。

這些方式會在頁面上產生清單檢視 (XSLT 清單檢視網頁組件) 和資料檢視 (資料表單網頁組件) 組合,雖然這兩種檢視有些差異,您可以用類似的方式進行自訂。您可以使用 SharePoint Designer 2010 中提供的工具,新增及移除欄、套用篩選、排序及群組欄位、套用設定格式化的條件,還有其他更多種作業。

本文說明您將使用 SharePoint Designer 2010,對清單或資料檢視進行的最常見自訂作業。

本文內容

開啟清單和資料檢視

新增、移除及重新排列欄

排序與分組

篩選

設定格式化的條件

分頁

啟用直接編輯

啟用非同步更新

新增工具列選項

套用檢視樣式

其他自訂選項

開啟清單和資料檢視

清單檢視和資料檢視可以在 SharePoint Designer 2010 中以多種不同方式建立及開啟 (如本文開頭所說明)。例如,您可以從目前關聯的清單或組件庫開啟清單檢視,或者可以從檢視所在的網站頁面開啟資料檢視。這兩種選項都在 [導覽] 功能表上 (與清單或組件庫,或任何數目的資料來源相關聯。使用下列其中一個方法在 SharePoint Designer 2010 中開啟清單檢視或資料檢視)。

在 SharePoint Designer 2010 中開啟網站

若要開啟與清單關聯的清單檢視

  1. 在 SharePoint Designer 2010 中開啟您的網站。

  2. 按一下 [導覽] 窗格中的 [清單和組件庫]

  3. 開啟包含清單檢視的清單。

  4. 按一下 [選項] 索引標籤,並使用檢視編輯選項來自訂清單檢視。

    附註:  您可能需要先在檢視之中按一下,以便顯示 SharePoint Designer 2010 中的檢視編輯選項。

若要從網站頁面開啟資料檢視或清單檢視

  1. 在 SharePoint Designer 2010 中開啟您的網站。

  2. 按一下 [導覽] 窗格中的 [網站頁面]

  3. 開啟包含資料檢視或清單檢視的頁面。

  4. 按一下 [選項] 索引標籤,並使用檢視編輯選項來自訂清單或資料檢視。

    附註:  您可能需要先在檢視之中按一下,以便顯示 SharePoint Designer 2010 中的檢視編輯選項。

本文其餘內容假定您已執行這些步驟或類似步驟,開啟檢視以供編輯。

頁首

新增、移除及重新排列欄

一般最先對資料檢視所進行的其中一項作業是新增及移除欄。在資料檢視中變更欄時,您要新增、移除或排列顯示在資料檢視中的欄位。您可以使用 [編輯欄] 對話方塊來新增、移除欄,以及重新排列欄的順序,不管是顯示列或欄。您也可以使用 [表格] 索引標籤上的表格編輯命令來修改欄,表格版面配置將在本文稍後內容中說明。

附註: 編輯欄命令只有在資料檢視以 HTML 表格顯示資料時提供使用。

執行下列步驟,在清單或資料檢視中新增、移除及重新排列欄。

  1. 當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後按一下 [新增/移除欄] 在 SharePoint Designer 2010 中開啟網站 。

    附註: 如果資料檢視所在的 HTML 表格使用值大於 1 的 rowspan 或 colspan 屬性,就無法使用編輯欄命令。

  2. [編輯欄] 對話方塊隨即開啟。
    在 SharePoint Designer 2010 中開啟網站

  3. 執行下列其中一項動作:

  4. 若要新增欄,請選取 [可用的欄位] 底下的欄欄位,然後按一下 [新增]

  5. 若要同時選取多個欄位,請按住 CTRL 鍵,並按一下所要的欄位。

  6. 若要移除現有欄,請在 [顯示的欄位] 底下選取欄,然後按一下 [移除]

  7. 若要同時選取多個欄位,請按住 CTRL 鍵,並按一下所要的欄位。

  8. 若要重新排列欄,請在 [顯示的欄位] 底下選取欄,然後按一下 [上移] 或 [下移]

  9. 按一下 [確定] 以套用變更至檢視。

附註: [編輯欄] 對話方塊只顯示包含於資料檢視之資料來源查詢中的欄位,您的實際資料來源可能包含其他欄位,若要將這些欄位包含在內,您必須更新資料來源查詢。

如需深入了解資料檢視,請瀏覽<請參閱>一節。

頁首

排序與分組

在資料檢視中排序資料時,您要修改資料顯示的順序,讓您和您的網站訪客更容易了解資料。排序順序的範例包括依字母和數字排序,您可以使用 SharePoint Designer 2010 中的 [進階排序] 對話方塊來建立其他排序順序。

除了排序以外,您也可以將資料分組。將資料分組時,可以將欄位群組的頁首或頁尾依排序順序顯示,並選擇依預設展開或摺疊群組,也可以選擇在為整個檢視分頁時讓群組保持在一起,並顯示各群組的欄名稱或總數。

若要在清單或資料檢視中為欄排序

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後按一下 [排序及群組] 在 SharePoint Designer 2010 中開啟網站 。

[排序及群組] 對話方塊隨即開啟。
在 SharePoint Designer 2010 中開啟網站

  1. 在 [可用的欄位] 底下,按一下要排序的欄位,然後按一下 [新增]

  2. 在 [排序內容] 底下,選取 [遞增] (從最低到最高) 或 [遞減] (從最高到最低) 來指定欄位的排序方式。

提示: 您也可以直接按兩下 [排序順序] 清單中的欄位,變更遞增或遞減排序順序。

  1. 若要使用比遞增或遞減更進階的排序,請按一下 [編輯排序運算式],這會開啟 [進階排序] 對話方塊,您可以在其中使用 XPath 運算式自訂排序順序。請參閱<使用 XPath 運算式進行清單與資料檢視的進階自訂>進一步深入了解。

  2. 若要將多個欄位排序,請在 [可用的欄位] 底下選擇更多欄位,然後將這些欄位加入排序順序作業。

    如果您將多個欄位加入排序順序作業,而且想要變更最先排序的欄位,請在 [排序順序] 清單中選取欄位,然後按一下 [上移] 或 [下移]

    按一下 [確定] 以套用變更至檢視。

若要將清單或資料檢視中的欄分組

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後按一下 [排序及群組] 排序及群組 。

  1. [排序及群組] 對話方塊隨即開啟。
    在 SharePoint Designer 2010 中開啟網站

  2. 在 [排序順序] 清單中,按一下要做為群組依據的欄位。
    請注意,排序順序中的每個欄位都可以套用個別的群組屬性。務必要先選取所要的欄位,再套用群組屬性。

  3. 若要在每一個群組的開頭顯示群組頁首,請在 [群組屬性] 底下選取 [顯示群組頁首] 核取方塊,然後執行下列其中一項:

    1. 若要讓檢視中的群組預設為展開的形式,請按一下 [根據預設值展開群組]

    2. 若要讓資料檢視中的群組預設為摺疊的形式,請按一下 [根據預設值摺疊群組]

  4. 剩餘的選項只套用至資料檢視,而不套用至清單檢視 (如需清單和資料檢視差異的詳細資訊,請瀏覽<請參閱>一節)。

  5. 若要在每一個群組的結尾顯示一個頁尾,以指示該群組中的記錄數目,請選取 [顯示群組頁尾] 核取方塊。

  6. 在您選取 [顯示群組頁首] 或 [顯示群組頁尾] 核取方塊之後,即可使用 [群組進階設定] 按鈕。

  7. 按一下 [群組進階設定] (在您選取 [顯示群組頁首] 或 [顯示群組頁尾] 選項時,此選項會變為已啟用)。

  8. 執行下列其中一項動作:

    • 若要隱藏此清單中的個別記錄,請選取 [永遠隱藏群組詳細資料] 核取方塊。

    • 若要將群組中所有項目顯示在一個頁面上 (即使總數超過要顯示在清單中的指定項目數),請選取 [分頁時維持群組] 核取方塊。

    • 若要在每一個群組中插入會顯示欄名稱的一列,請選取 [顯示每個群組的欄名稱] 核取方塊。

    • 若要在每一個群組中插入會顯示每一群組內之記錄總數的一列,請選取 [顯示每個群組的欄總計] 核取方塊。

若要允許網站使用者透過瀏覽器對資料進行排序或分組,您可以在檢視中加入工具列,本文稍後內容將詳細說明。

頁首

篩選

您可以套用篩選至檢視,使得只有符合特定準則的資料才會顯示在清單或資料檢視中。當您有包含數百筆或數千筆記錄的檢視而想要更容易讀取資料時,篩選會很有用。建立篩選時,您可以建立套用至資料的一個或多個運算式,運算式有三個基本部分:欄位名稱 (您要篩選的欄位名稱)、運算子 (您要套用至值的規則) 和值 (您在尋找的資料)。

執行下列步驟以篩選清單或資料檢視。

  1. 當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後按一下 [篩選] 在 SharePoint Designer 2010 中開啟網站 。

  2. [篩選準則] 對話方塊隨即開啟。
    在 SharePoint Designer 2010 中開啟網站

  3. 按一下 [欄位名稱] 底下包含所要值的欄位。

  4. 按一下 [選輯比對] 方塊,然後按一下所需的運算子。

  5. 按一下 [值] 方塊,然後選取或輸入所需的準則。

  6. 若要再增加一個條件至篩選,請按一下現有條件結尾的 [和/或] 方塊,然後:

    1. 按一下 [和],以建立篩選,讓資料必須符合兩個條件中的準則。

    2. 按一下 [或],以建立篩選,讓資料必須只符合一個條件中的準則。

  7. 按一下訊息 [在這裡按一下以加入新條件]

  8. 重複步驟 3-6,為此篩選建立其他條件。

  9. 如果您使用資料檢視,並想要使用更進階的條件,請核取 [新增 XSLT 篩選] 方塊,然後按一下 [編輯]
    這會開啟 [進階條件] 對話方塊,您可以在其中使用 XPath 運算式自訂排序順序。

  10. 按一下 [確定]

若要允許網站訪客透過瀏覽器對資料進行排序及分組,您可以在檢視中加入工具列,本文稍後內容將詳細說明。請記住,在瀏覽器中篩選只會影響資料的呈現,而不會限制檢視中可用的資料量。

附註: 篩選資料檢視可能會影響效能,篩選的資料集務必要在可管理範圍內。當您使用 [篩選準則] 對話方塊套用基本篩選時,篩選是在傳回資料之前套用,但是如果您使用 [進階篩選] 選項 (可在資料檢視中使用),篩選會在傳回資料之後套用於 XSLT 呈現之中

頁首

設定格式化的條件

您可以使用設定格式化的條件,在資料符合特定準則時,套用格式化文字、背景色彩、自訂圖示及其他各項至選取的 HTML 標籤或資料值,也可以設定條件,決定顯示或隱藏 HTML 標籤或資料值。設定格式化條件是功能極強的方式,可在資料檢視中醒目提示需要使用者執行動作的項目,例如,您可以醒目提示超過期限的工作、超過預算的專案或即將用完的公司用品。

執行下列步驟以套用設定格式化的條件至清單或資料檢視。

當檢視在 SharePoint Designer 2010 中開啟時,按一下要套用設定格式化條件的列或欄。

  1. 按一下 [選項] 索引標籤,再按一下 [篩選] 在 SharePoint Designer 2010 中開啟網站 ,然後選擇下列其中一項:

  2. [顯示內容] 可在檢視中顯示符合指定準則的資料。

  3. [隱藏內容] 可在檢視中隱藏符合指定準則的資料。

  4. [設定列格式] 可套用格式至符合指定準則的列。

  5. [設定欄格式] 可套用格式至符合指定準則的欄。

  6. [格式化選取範圍] 可套用格式至符合指定準則的選取範圍 (您必須先醒目提示部分資料檢視,才能使用此選項)。

附註:  顯示與隱藏內容選項會變更所選取 HTML 標籤或資料值的可見性,設定格式選項則套用樣式至選取的 HTML 標籤或資料值。

  1. [條件準則] 對話方塊隨即開啟。
    在 SharePoint Designer 2010 中開啟網站

  2. 按一下 [欄位名稱] 底下包含所要值的欄位。

  3. 按一下 [選輯比對] 方塊,然後按一下所需的運算子。

  4. 按一下 [值] 方塊,然後選取或輸入所需的準則。

  5. 若要在檢視上使用更進階的條件,請按一下 [進階]
    這會開啟 [進階條件] 對話方塊,您可以使用 XPath 運算式在其中自訂排序順序。

  6. 若要再增加一個條件至條件準則,請按一下現有條件結尾的 [和/或] 方塊,然後:

    • 按一下 [和],以建立條件準則,讓資料必須符合兩個條件中的準則。

    • 按一下 [或],以建立條件準則,讓資料必須只符合一個條件中的準則。

  7. 在現有條件下面,按一下訊息 [在這裡按一下以加入新條件]

  8. 重複步驟 4-7,為此條件準則建立其他條件。

  9. 如果您是使用條件顯示或隱藏資料,請按一下 [確定] 關閉對話方塊。若要套用特殊格式至條件,請按一下 [設定樣式]

  10. [修改樣式] 對話方塊隨即開啟。
    在 SharePoint Designer 2010 中開啟網站

  11. 選擇您要套用至資料檢視的格式選項。
    例如,若要用黃色背景的粗體文字,就要在 [字型粗細] 功能表中選擇 [粗體],然後按一下 [背景色彩] 功能表中的 [背景] 類別,輸入 [黃色] 或選擇不同變化的黃色。

  12. 按一下 [確定]

由於清單和資料檢視顯示即時資料,您會看到設定格式化的條件立即套用在資料檢視中。

頁首

分頁

您可以使用分頁,變更顯示在清單或資料檢視每一頁上的記錄數。您可以設定檢視,以便以 5、10 或任何指定值成組顯示項目。如此一來,網站訪客會在瀏覽器中看到上一頁和下一頁連結,可用來導覽檢視。或者,您也可以指定要在檢視中顯示的最大項目數上限,同樣地,也可以是 5、10 或任何指定值。

執行下列步驟以新增分頁值至清單或資料檢視。

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後按一下 [分頁] 在 SharePoint Designer 2010 中開啟網站 。

  1. 選擇下列其中一個分頁選項:

  2. 顯示大小為 n 個項目的集:選擇以 1、5、10 或 30 為一組顯示項目。

附註: 當記錄總數超過這個選項中指定的數目時,選取這個選項會在檢視中顯示導覽連結。

  1. 限制為 n 個項目:選擇要顯示在檢視中的最大項目數,n 為 1、5、10 或 30。

  2. 選擇 [其他分頁選項] 為資料檢視分頁指定自訂值。

  3. [資料檢視摘要資訊] 對話方塊隨即開啟。
    在 SharePoint Designer 2010 中開啟網站

  4. 在 [分頁] 索引標籤上,選取下列其中一個選項:

    • 選擇 [顯示下列大小的項目],然後在提供的方塊中指定數目。
      如果檢視中有 25 筆以上的記錄,這個選項中的預設值是 10;如果檢視有 25 筆以下的記錄,則預設值是 6。

    • 選擇 [限制顯示的項目總數為],然後在提供的方塊中指定數目。
      這個欄位中的預設值是設定為 100。

  5. 按一下 [確定]

除了變更在網頁上為檢視顯示的記錄數以外,您也可以變更在 SharePoint Designer 2010 的設計檢視中顯示的記錄數。當您要查看檢視如何以特定記錄數呈現時,就可以執行這項作業。若要變更設計檢視中的記錄數,請按一下 [設計] 索引標籤,然後在 [預覽] 群組中,選擇其中一個可用的資料檢視預覽選項。

頁首

啟用直接編輯

啟用直接編輯時,網站訪客很容易就能在檢視的環境中編輯每筆記錄,而不必離開頁面或開啟新視窗,只要按一下資料檢視中欄或列旁邊的編輯按鈕,各欄位就會變得可編輯。每筆記錄都可使用文字方塊、功能表和欄位控制項,使用方式與在新增和編輯項目表單上相同。直接編輯在同一處結合了檢視和表單的最佳功能。

執行下列步驟為清單或資料檢視啟用直接編輯。

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後按一下 [直接編輯] 在 SharePoint Designer 2010 中開啟網站 。
對於清單檢視,這會啟用新增和編輯連結,讓網站訪客用來建立及編輯記錄。

  1. 對資料檢視,請選擇下列其中一個或全部直接編輯選項:

    1. 顯示編輯項目連結:啟用編輯連結,讓使用者按一下即可直接編輯該記錄。

    2. 顯示插入項目連結:啟用插入連結,讓使用者按一下即可直接建立新記錄。

    3. 顯示刪除項目連結:啟用刪除連結,讓使用者按一下即可直接刪除記錄。

  2. 儲存清單或資料檢視的變更。

對於清單檢視,下次您在瀏覽器中開啟檢視並將游標移到列或欄上時,會看到 [編輯] 在 SharePoint Designer 2010 中開啟網站 按鈕。對於資料檢視,則會在各列或欄旁邊看到 [編輯] 連結。

按一下連結即可開始直接編輯記錄的列或欄,如下所示。

在 SharePoint Designer 2010 中開啟網站

頁首

啟用非同步更新

非同步更新是 ASP.NET AJAX 平台的核心元件,您可以為網站上的清單和資料檢視啟用此元件。啟用非同步更新時,清單或資料檢視會即時從伺服器擷取資料,並呈現在瀏覽器中,而使用者不必重新整理該頁面。含非同步更新的清單和資料檢視最適合用於資料豐富的動態網頁和儀表板。

附註:  非同步更新可以在管理中心停用,所以如果無法使用這個選項,請洽詢您的伺服器管理員

執行下列步驟為清單或資料檢視啟用非同步更新。

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [選項] 索引標籤,然後選取 [非同步更新] 方塊。
在 SharePoint Designer 2010 中開啟網站

  1. 若要在頁面上新增重新整理按鈕,請選取 [重新整理按鈕] 方塊。
    這可以讓網站訪客按一下重新整理按鈕 在 SharePoint Designer 2010 中開啟網站 ,手動重新整理頁面。

  2. 選擇重新整理間隔:15 秒、30 秒 或 60 秒

  3. 儲存清單或資料檢視的變更。


如果檢視是使用清單或組件庫做為資料來源,您可以將 SharePoint 清單工具列新增至檢視,這樣使用者就可以更有效率地使用基底的清單或組件庫。SharePoint 清單工具列是位於清單或組件庫頂端的功能表列,可提供讓您使用該清單或組件庫的各種選項。您可以新增的工具列有兩種:

  • [SharePoint 工具列] 提供清單編輯選項,例如新增項目、建立檢視和欄,以及編輯清單的內容。

  • [群組工具列] 提供清單檢視選項,如變更篩選、排序及分組。

執行下列步驟以新增工具列至清單或資料檢視。

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [設計] 索引標籤,然後按一下 [選項] 在 SharePoint Designer 2010 中開啟網站 。

  1. 若要新增含清單編輯選項的完整工具列,請按一下 [SharePoint 工具列]

  2. 若要新增含清單檢視選項的工具列,請按一下 [群組工具列]

    附註: 工具列在檢視呈現中套用篩選,而不是在查詢層級中套用,因此您應該依賴這項工具列做為篩選檢視的主要工具。執行這項作業時,您應該依本文前述內容來使用篩選。

  3. 若要移除工具列,請按一下 [無]

  4. 儲存清單或資料檢視的變更。

在瀏覽器中開啟檢視時,您會在頁面頂端看到工具列。如果您同時啟用 SharePoint 工具列和群組工具列,就會在檢視頂端看到這些選項。

在 SharePoint Designer 2010 中開啟網站

頁首

套用檢視樣式

建立清單或資料檢視時,一般來說,資料是預設為以基本表格版面配置顯示。您可以套用不同的檢視樣式,迅速又輕鬆地變更檢視的版面配置。例如,您可以將檢視的基本表格版面配置變更為呈現框線、欄或項目符號清單的檢視。

套用檢視樣式至清單或資料檢視之前,請務必要注意,先前的任何自訂作業和網頁組件連線都會移除。

執行下列步驟以套用檢視樣式至清單或資料檢視。

當檢視在 SharePoint Designer 2010 中開啟時,按一下 [設計] 索引標籤,然後根據預覽和動態顯示文字描述按一下其中一個檢視樣式。

在 SharePoint Designer 2010 中開啟網站

附註: 依檢視樣式是套用至清單檢視或資料檢視,您會看到不同的檢視樣式可供使用,而且樣式的數目也會依上傳至網站集合中樣式庫的項目而定。

  1. 若要查看更多樣式,請按一下 [檢視樣式] 群組右下角的 [其他] 在 SharePoint Designer 2010 中開啟網站 。

  2. 如果變更檢視樣式,就會顯示警告訊息通知您,任何自訂格式和網頁組件連線都會移除。按一下 [是] 繼續進行。

附註: 如果您選擇的樣式所顯示的欄位少於原來的檢視,多餘的欄位會從檢視中移除。

  1. 儲存清單或資料檢視的變更。

頁首

其他自訂選項

除了上述自訂作業以外,您也可以用下列方式自訂清單或資料檢視:

  • 建立公式欄     顯示檢視中其他欄的計算結果。這類似於在試算表程式中使用公式的方式,例如,您可以將產品的單價乘以庫存單位數,在另一欄中顯示項目的總值。

  • 顯示來自多個來源的資料     都在單一檢視中。這是功能強大的方式,可將資料來源結合在一處。例如,您可以在相同檢視中,顯示一份清單的產品類別和另一份清單的產品資訊。

  • 新增參數     至清單或資料檢視。例如,您可能要將另一份功能表的參數傳遞到資料檢視,並依該參數值篩選資料。

  • 新增伺服器控制項     至清單或資料檢視。您可以繫結 SharePoint 控制項、ASP.NET 控制項及其他項目至資料來源,並新增至檢視,為使用者建立豐富的互動式資料介面。

  • 變更字型及格式     套用至清單或資料檢視。您可以變更欄標題和欄位的字型大小、字型色彩、字型家族及其他。您可以手動方式使用 SharePoint Designer 2010 中的所見即所得 (WYSIWYG) 工具執行這項作業,也可以在頁面上套用 CSS 樣式至這些元素。

  • 自訂表格版面配置     變更清單和資料檢視。您可以使用 SharePoint Designer 2010 中的表格編輯選項,新增並移除表格儲存格、變更列或欄的寬度和高度、顯示或隱藏框線或陰影,以及其他各項作業。

    評語
    請登入後才可以評分
    位置
    資料夾名稱
    資圖處
    發表人
    林冠伶
    單位
    樹人資管影音分享平台 (root)
    建立
    2016-06-22 16:13:48
    最近修訂
    2021-04-26 17:50:52
    更多