.net 如何在C#中创建具有可展开/可折叠行的表

q3qa4bjr  于 2023-04-22  发布在  .NET
关注(0)|答案(2)|浏览(79)

我尝试以表格格式显示一些数据,其中每行可以垂直展开以显示其他信息。
让我们假设这是一个书籍列表,其中最初可见的行具有标题、作者等列。
然后,当选择一行时,它会垂直展开,并在下面显示一个新区域,其中包含一个包含书籍的长文本说明的单元格(跨越行的宽度)。
基本上,当第二行被选中时,我想要的是近似于以下结构的东西:

我可以用DataGridView或ListView设置为Details轻松地完成表部分,但我还不知道如何完成行扩展部分。
有没有什么方法可以做到这一点,或者至少在用户看来是这样的?
如果可能的话,我宁愿避免使用第三方库。

44u64gxh

44u64gxh1#

在C# DataGridView中实现可展开/可折叠行的一种方法是使用DataGridView的RowTemplate属性,并将其自定义为包含一个可以展开和折叠的面板控件。

// Create a DataGridView control
DataGridView dataGridView1 = new DataGridView();

// Set the RowTemplate property to customize the rows
dataGridView1.RowTemplate.Height = 50;
dataGridView1.RowTemplate.DefaultCellStyle.WrapMode = DataGridViewTriState.True;
dataGridView1.RowTemplate.DefaultCellStyle.Alignment = DataGridViewContentAlignment.TopLeft;

// Add a panel control to the RowTemplate
Panel panel = new Panel();
panel.Dock = DockStyle.Fill;
panel.Visible = false;
panel.BackColor = Color.LightBlue;

dataGridView1.RowTemplate.Controls.Add(panel);

// Add an event handler for the RowStateChanged event to handle row selection
dataGridView1.RowStateChanged += (sender, e) =>
{
    if (e.StateChanged == DataGridViewElementStates.Selected)
    {
        DataGridViewRow row = dataGridView1.Rows[e.Row.Index];
        Panel p = (Panel)row.Cells[0].OwningRow.Template.Controls[0];
        p.Visible = !p.Visible;
    }
};

// Add columns to the DataGridView
dataGridView1.Columns.Add("Title", "Title");
dataGridView1.Columns.Add("Author", "Author");

// Add data to the DataGridView
dataGridView1.Rows.Add("Book 1", "Author 1");
dataGridView1.Rows.Add("Book 2", "Author 2");

// Set the control to fill the form
dataGridView1.Dock = DockStyle.Fill;

// Add the control to the form
this.Controls.Add(dataGridView1);

Panel控件将添加到DataGridView的RowTemplate中,并在默认情况下设置为不可见。选择某行时,将触发RowStateChanged事件的事件处理程序,并切换面板的可见性。面板可以包含要在展开行时显示的任何信息。
请注意,在此示例中,面板被添加到每行的第一个单元格。如果DataGridView的布局不同,则可能需要调整列索引。此外,您可以自定义面板控件的外观和行为以满足您的需要。

rlcwz9us

rlcwz9us2#

如果你正在使用ASP.NET。这是我的部分视图。我认为它可以帮助你。我们将在模型中存储colspan和rowspan的数量。你可以用2个<div>替换<p>标签:一个总是可见的,一个是隐藏的。你需要一些JS事件处理器来切换隐藏的一个点击。

@model ReportTableModel

<div class="w-100 overflow-scroll mt-5 border-2 border-primary">
    <table class="table table-bordered text-wrap">
        @foreach (var tr in Model.TrModels)
        {
            <tr id="@("tr" + tr.Index)">
                <td class="bg-black"></td>
                @foreach (var td in tr.TdModels)
                {
                    <td id="@(td.Address)" rowspan="@td.RowSpan" colspan="@td.ColSpan"
                        style="@(String.Join("; ", td.StyleModels.Select(x=> x.Name + ": " + x.Value)))">
                        @*<p style="@(td.IsWrappedString ? "white-space: pre-line;" : ""); margin: 0;">@td.FormatedString</p>*@
                        <p style="margin: 0;">@td.FormatedString</p>
                    </td>
                }
                <td class="bg-black"></td>
            </tr>
        }
    </table>
</div>

HTMl will be:

相关问题