逐步解說：使用兩個 Windows Form DataGridView 控制項建立主要/詳細表單

發行項
10/18/2023

使用 DataGridView 控制項最常見的案例之一是 主要/詳細 資料表單，其中會顯示兩個資料庫資料表之間的父/子關聯性。選取主資料表中的資料列會導致詳細資料資料表以對應的子資料更新。

實作主圖形/詳細資料表單很容易使用控制項與 BindingSource 元件之間的 DataGridView 互動。在本逐步解說中，您將使用兩個 DataGridView 控制項和兩個 BindingSource 元件來建置表單。表單會顯示 Northwind SQL Server 範例資料庫中的兩個相關資料表： Customers 和 Orders 。當您完成時，將會有一個表單，此表單會顯示 master DataGridView 資料庫中的所有客戶，以及詳細 DataGridView 資料中所選客戶的所有訂單。

若要將本主題中的程式碼複製為單一清單，請參閱如何：使用兩個 Windows Forms DataGridView 控制項建立主要/詳細資料表單。

必要條件

為了完成這個逐步解說，您需要：

具有 Northwind SQL Server 範例資料庫的伺服器存取權。

建立表單

若要建立主圖形/詳細資料表單

建立衍生自 Form 的類別，並包含兩 DataGridView 個控制項和兩個 BindingSource 元件。下列程式碼提供基本的表單初始化，並包含 Main 方法。如果您使用 Visual Studio 設計工具來建立表單，您可以使用設計工具產生的程式碼，而不是此程式碼，但請務必使用此處變數宣告中顯示的名稱。

using System;
using System.Data;
using System.Data.SqlClient;
using System.Windows.Forms;

public class Form1 : System.Windows.Forms.Form
{
    private DataGridView masterDataGridView = new DataGridView();
    private BindingSource masterBindingSource = new BindingSource();
    private DataGridView detailsDataGridView = new DataGridView();
    private BindingSource detailsBindingSource = new BindingSource();

    [STAThreadAttribute()]
    public static void Main()
    {
        Application.Run(new Form1());
    }

    // Initializes the form.
    public Form1()
    {
        masterDataGridView.Dock = DockStyle.Fill;
        detailsDataGridView.Dock = DockStyle.Fill;

        SplitContainer splitContainer1 = new SplitContainer();
        splitContainer1.Dock = DockStyle.Fill;
        splitContainer1.Orientation = Orientation.Horizontal;
        splitContainer1.Panel1.Controls.Add(masterDataGridView);
        splitContainer1.Panel2.Controls.Add(detailsDataGridView);

        this.Controls.Add(splitContainer1);
        this.Load += new System.EventHandler(Form1_Load);
        this.Text = "DataGridView master/detail demo";
    }

Imports System.Data
Imports System.Data.SqlClient
Imports System.Windows.Forms

Public Class Form1
    Inherits System.Windows.Forms.Form

    Private masterDataGridView As New DataGridView()
    Private masterBindingSource As New BindingSource()
    Private detailsDataGridView As New DataGridView()
    Private detailsBindingSource As New BindingSource()

    <STAThreadAttribute()> _
    Public Shared Sub Main()
        Application.Run(New Form1())
    End Sub

    ' Initializes the form.
    Public Sub New()

        masterDataGridView.Dock = DockStyle.Fill
        detailsDataGridView.Dock = DockStyle.Fill

        Dim splitContainer1 As New SplitContainer()
        splitContainer1.Dock = DockStyle.Fill
        splitContainer1.Orientation = Orientation.Horizontal
        splitContainer1.Panel1.Controls.Add(masterDataGridView)
        splitContainer1.Panel2.Controls.Add(detailsDataGridView)

        Me.Controls.Add(splitContainer1)
        Me.Text = "DataGridView master/detail demo"

    End Sub

End Class

在表單的類別定義中實作方法，以處理連線到資料庫的詳細資料。這個範例會使用 GetData 填入 DataSet 物件的方法、將物件加入 DataRelation 資料集，以及系結 BindingSource 元件。請務必將 connectionString 變數設定為適用於您資料庫的值。

重要

在連接字串內儲存機密資訊 (例如密碼) 會影響應用程式的安全性。使用 Windows 驗證 (也稱為整合式安全性) 是控制資料庫存取的更安全方式。如需詳細資訊，請參閱保護連線資訊。

private void GetData()
{
    try
    {
        // Specify a connection string. Replace the given value with a
        // valid connection string for a Northwind SQL Server sample
        // database accessible to your system.
        String connectionString =
            "Integrated Security=SSPI;Persist Security Info=False;" +
            "Initial Catalog=Northwind;Data Source=localhost";
        SqlConnection connection = new SqlConnection(connectionString);

        // Create a DataSet.
        DataSet data = new DataSet();
        data.Locale = System.Globalization.CultureInfo.InvariantCulture;

        // Add data from the Customers table to the DataSet.
        SqlDataAdapter masterDataAdapter = new
            SqlDataAdapter("select * from Customers", connection);
        masterDataAdapter.Fill(data, "Customers");

        // Add data from the Orders table to the DataSet.
        SqlDataAdapter detailsDataAdapter = new
            SqlDataAdapter("select * from Orders", connection);
        detailsDataAdapter.Fill(data, "Orders");

        // Establish a relationship between the two tables.
        DataRelation relation = new DataRelation("CustomersOrders",
            data.Tables["Customers"].Columns["CustomerID"],
            data.Tables["Orders"].Columns["CustomerID"]);
        data.Relations.Add(relation);

        // Bind the master data connector to the Customers table.
        masterBindingSource.DataSource = data;
        masterBindingSource.DataMember = "Customers";

        // Bind the details data connector to the master data connector,
        // using the DataRelation name to filter the information in the
        // details table based on the current row in the master table.
        detailsBindingSource.DataSource = masterBindingSource;
        detailsBindingSource.DataMember = "CustomersOrders";
    }
    catch (SqlException)
    {
        MessageBox.Show("To run this example, replace the value of the " +
            "connectionString variable with a connection string that is " +
            "valid for your system.");
    }
}

Private Sub GetData()

    Try
        ' Specify a connection string. Replace the given value with a 
        ' valid connection string for a Northwind SQL Server sample
        ' database accessible to your system.
        Dim connectionString As String = _
            "Integrated Security=SSPI;Persist Security Info=False;" & _
            "Initial Catalog=Northwind;Data Source=localhost"
        Dim connection As New SqlConnection(connectionString)

        ' Create a DataSet.
        Dim data As New DataSet()
        data.Locale = System.Globalization.CultureInfo.InvariantCulture

        ' Add data from the Customers table to the DataSet.
        Dim masterDataAdapter As _
            New SqlDataAdapter("select * from Customers", connection)
        masterDataAdapter.Fill(data, "Customers")

        ' Add data from the Orders table to the DataSet.
        Dim detailsDataAdapter As _
            New SqlDataAdapter("select * from Orders", connection)
        detailsDataAdapter.Fill(data, "Orders")

        ' Establish a relationship between the two tables.
        Dim relation As New DataRelation("CustomersOrders", _
            data.Tables("Customers").Columns("CustomerID"), _
            data.Tables("Orders").Columns("CustomerID"))
        data.Relations.Add(relation)

        ' Bind the master data connector to the Customers table.
        masterBindingSource.DataSource = data
        masterBindingSource.DataMember = "Customers"

        ' Bind the details data connector to the master data connector,
        ' using the DataRelation name to filter the information in the 
        ' details table based on the current row in the master table. 
        detailsBindingSource.DataSource = masterBindingSource
        detailsBindingSource.DataMember = "CustomersOrders"
    Catch ex As SqlException
        MessageBox.Show("To run this example, replace the value of the " & _
            "connectionString variable with a connection string that is " & _
            "valid for your system.")
    End Try

End Sub

實作表單 Load 事件的處理常式，將控制項系結 DataGridView 至 BindingSource 元件並呼叫 GetData 方法。下列範例包含可 DataGridView 調整資料行大小以符合所顯示資料的程式碼。

private void Form1_Load(object sender, System.EventArgs e)
{
    // Bind the DataGridView controls to the BindingSource
    // components and load the data from the database.
    masterDataGridView.DataSource = masterBindingSource;
    detailsDataGridView.DataSource = detailsBindingSource;
    GetData();

    // Resize the master DataGridView columns to fit the newly loaded data.
    masterDataGridView.AutoResizeColumns();

    // Configure the details DataGridView so that its columns automatically
    // adjust their widths when the data changes.
    detailsDataGridView.AutoSizeColumnsMode =
        DataGridViewAutoSizeColumnsMode.AllCells;
}

Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load

    ' Bind the DataGridView controls to the BindingSource
    ' components and load the data from the database.
    masterDataGridView.DataSource = masterBindingSource
    detailsDataGridView.DataSource = detailsBindingSource
    GetData()

    ' Resize the master DataGridView columns to fit the newly loaded data.
    masterDataGridView.AutoResizeColumns()

    ' Configure the details DataGridView so that its columns automatically
    ' adjust their widths when the data changes.
    detailsDataGridView.AutoSizeColumnsMode = _
        DataGridViewAutoSizeColumnsMode.AllCells

End Sub

測試應用程式

您現在可以測試表單，以確保其如預期般運作。

測試表單

編譯並執行應用程式。

您會看到兩 DataGridView 個控制項，一個高於另一個。最上層是 Northwind Customers 資料表中的客戶，而底部則對應 Orders 至選取的客戶。當您在上方 DataGridView 選取不同的資料列時，下層 DataGridView 的內容會據以變更。

後續步驟

此應用程式可讓您對控制項的功能有基本的瞭解 DataGridView 。您可以透過數種方式自訂控制項的外觀和行為 DataGridView ：

變更框線和標題樣式。如需詳細資訊，請參閱如何：變更 Windows Forms DataGridView 控制項中的框線和格線樣式。
啟用或限制使用者輸入控制項 DataGridView 。如需詳細資訊，請參閱 How to： Prevent Row Addition and Deletion in the Windows Forms DataGridView Control ， and How to： Make Columns Read-Only in the Windows Forms DataGridView Control .
驗證控制項的使用者輸入 DataGridView 。如需詳細資訊，請參閱逐步解說：驗證 Windows Forms DataGridView 控制項中的資料。
使用虛擬模式處理非常大的資料集。如需詳細資訊，請參閱逐步解說：在 Windows Forms DataGridView 控制項中實作虛擬模式。
自訂儲存格的外觀。如需詳細資訊，請參閱如何：自訂 Windows Forms DataGridView 控制項中的儲存格外觀和如何：設定 Windows Forms DataGridView 控制項的預設儲存格樣式。