C# 组织多级列标题

几天来，我一直在试图弄清楚如何在GridView中创建和移动标题。我问了一些问题，但没有回答

我已经设法前进了一步，现在我正在以一种不同的方式做事

这就是我想要创造的：

我现在已经创建了标题“Rota”，然后在下面创建了GridView中需要的日期，但是我有3个问题

• 我的数据在我拥有的行数上重复

• 我需要将“实际”和“预期”移到天数以下

• 我需要得到1-23，以显示以下的小时标签

这就是我到目前为止所做的：

正如您所看到的，当我只需要标题时，所有内容都被复制了，实际的和预期的都需要在T上分布到S（我们需要保留第一个小时标签），最后我需要在“小时”标签下显示小时数

HTML（到目前为止）：

更新

我已经对GridView的布局进行了排序，但GridView仍在复制我的数据

这是我的“假”数据，这就是我认为我的观点混乱的原因：

  private DataTable GridData()
    {
        DataTable griddt;
        griddt = new DataTable();
        griddt.Columns.Add("id", typeof(string));
        griddt.Columns.Add("Hour", typeof(int));

        DataRow griddr;

        griddr = griddt.NewRow();
        griddr["id"] = 1;
        griddr["Hour"] = 1;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 2;
        griddr["Hour"] = 2;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 3;
        griddr["Hour"] = 3;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 4;
        griddr["Hour"] = 4;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 5;
        griddr["Hour"] = 5;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 6;
        griddr["Hour"] = 6;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 7;
        griddr["Hour"] = 7;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 8;
        griddr["Hour"] = 8;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 9;
        griddr["Hour"] = 9;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 10;
        griddr["Hour"] = 10;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 11;
        griddr["Hour"] = 11;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 12;
        griddr["Hour"] = 12;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 13;
        griddr["Hour"] = 13;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 14;
        griddr["Hour"] = 14;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 15;
        griddr["Hour"] = 15;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 16;
        griddr["Hour"] = 16;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 17;
        griddr["Hour"] = 17;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 18;
        griddr["Hour"] = 18;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 19;
        griddr["Hour"] = 19;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 20;
        griddr["Hour"] = 20;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 21;
        griddr["Hour"] = 21;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 22;
        griddr["Hour"] = 22;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 23;
        griddr["Hour"] = 23;
        griddt.Rows.Add(griddr);

        griddt.PrimaryKey = new DataColumn[] { griddt.Columns["id"] };

        return griddt;

---

看看我为您所追求的布局创建的示例解决方案：

Aspx标记：

<div style="width:420px; text-align:center; border:1px solid black;">
    Rota Data Schedule
    <br />
    <asp:Repeater runat="server" ID="rpDaysOfWeek">
        <ItemTemplate><asp:LinkButton runat="server" ID="lnkDay" CommandArgument='<%# Bind("DayID") %>' OnCommand="DaySelect_Command"
                Font-Bold='<%# Bind("IsSelected") %>' Text='<%# Bind("DayAbbr") %>' Width="58" BorderStyle="Solid" BorderWidth="1"
                style="margin:0 0 0 0;" BorderColor="Black" ForeColor="Black" /></ItemTemplate>
    </asp:Repeater>
    <asp:GridView runat="server" ID="gvHoursAttendance" Width="420" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="Hour" DataField="Hour" DataFormatString="{0:00':00'}" />
            <asp:BoundField HeaderText="Expected" DataField="ExpectedCount" />
            <asp:BoundField HeaderText="Actual" DataField="ActualCount" />
        </Columns>
    </asp:GridView>
</div>

---

关键是避免在网格上进行如此多的定制。星期几用作数据的参数，但不表示网格中的任何数据列。只需将其单独移出，并让网格显示您所关注的数据——按小时计算的出勤率。（请注意，如果您仍然希望

Hour

、

Expected

和

Actual

与日期标签完全对齐，您可以提供明确的列宽，但我建议您不要这样做，因为日期不是真正的列，而是选项卡，因此您可能会引入混淆。）

对不起，但我需要先建立自己的理解，然后才能提供帮助。我希望网格更像是在描述中找到的。在您的情况下，我希望

Hour

不会作为姓名出现，并且希望

Expected

和

Actual

每天都出现。你能给我们一个更详细的例子（用填好的数据）说明你想展示什么吗？@MikeGuthrie谢谢你回来。这些数据只是数字，包括当天员工人数和实际人数。我已经编辑了我的问题，因为我已经完成了布局，现在需要尝试阻止网格复制数据。@MikeGuthrie我已经在问题的顶部画了一幅图像。顶部的天数将单击clickable并更改红色框中的数据。时间将在左边。图片应该在我问题的顶部解释。填充列表的可点击天数是我缺少的部分。现在对我来说有意义了。是否有一些要求迫使您将天数作为网格本身的一部分？看起来这将比它自己的元素简单得多。@MikeGuthrie我只需要它看起来像上面一样，如何实现它并不重要，我只是被所有的数据复制所困扰。你有什么建议？它需要是一个GridView，因为当单击某一天时，它会将数据绑定到网格中。

  private DataTable GridData()
    {
        DataTable griddt;
        griddt = new DataTable();
        griddt.Columns.Add("id", typeof(string));
        griddt.Columns.Add("Hour", typeof(int));

        DataRow griddr;

        griddr = griddt.NewRow();
        griddr["id"] = 1;
        griddr["Hour"] = 1;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 2;
        griddr["Hour"] = 2;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 3;
        griddr["Hour"] = 3;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 4;
        griddr["Hour"] = 4;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 5;
        griddr["Hour"] = 5;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 6;
        griddr["Hour"] = 6;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 7;
        griddr["Hour"] = 7;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 8;
        griddr["Hour"] = 8;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 9;
        griddr["Hour"] = 9;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 10;
        griddr["Hour"] = 10;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 11;
        griddr["Hour"] = 11;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 12;
        griddr["Hour"] = 12;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 13;
        griddr["Hour"] = 13;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 14;
        griddr["Hour"] = 14;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 15;
        griddr["Hour"] = 15;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 16;
        griddr["Hour"] = 16;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 17;
        griddr["Hour"] = 17;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 18;
        griddr["Hour"] = 18;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 19;
        griddr["Hour"] = 19;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 20;
        griddr["Hour"] = 20;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 21;
        griddr["Hour"] = 21;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 22;
        griddr["Hour"] = 22;
        griddt.Rows.Add(griddr);

        griddr = griddt.NewRow();
        griddr["id"] = 23;
        griddr["Hour"] = 23;
        griddt.Rows.Add(griddr);

        griddt.PrimaryKey = new DataColumn[] { griddt.Columns["id"] };

        return griddt;

<div style="width:420px; text-align:center; border:1px solid black;">
    Rota Data Schedule
    <br />
    <asp:Repeater runat="server" ID="rpDaysOfWeek">
        <ItemTemplate><asp:LinkButton runat="server" ID="lnkDay" CommandArgument='<%# Bind("DayID") %>' OnCommand="DaySelect_Command"
                Font-Bold='<%# Bind("IsSelected") %>' Text='<%# Bind("DayAbbr") %>' Width="58" BorderStyle="Solid" BorderWidth="1"
                style="margin:0 0 0 0;" BorderColor="Black" ForeColor="Black" /></ItemTemplate>
    </asp:Repeater>
    <asp:GridView runat="server" ID="gvHoursAttendance" Width="420" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="Hour" DataField="Hour" DataFormatString="{0:00':00'}" />
            <asp:BoundField HeaderText="Expected" DataField="ExpectedCount" />
            <asp:BoundField HeaderText="Actual" DataField="ActualCount" />
        </Columns>
    </asp:GridView>
</div>

private DaySelect[] Days = new DaySelect[] 
    {
        new DaySelect() { DayAbbr = "M", DayID = 1, IsSelected = true },
        new DaySelect() { DayAbbr = "T", DayID = 2 },
        new DaySelect() { DayAbbr = "W", DayID = 3 },
        new DaySelect() { DayAbbr = "T", DayID = 4 },
        new DaySelect() { DayAbbr = "F", DayID = 5 },
        new DaySelect() { DayAbbr = "S", DayID = 6 },
        new DaySelect() { DayAbbr = "S", DayID = 7 },
    };

protected void Page_Load(object sender, EventArgs e)
{
    rpDaysOfWeek.DataSource = Days;

    if (!Page.IsPostBack)
    {
        rpDaysOfWeek.DataBind();
        gvHoursAttendance.DataSource = CreateWorkHours(Days.Single(d => d.IsSelected).DayID);
        gvHoursAttendance.DataBind();
    }
}

protected void DaySelect_Command(object sender, CommandEventArgs e)
{
    int dayId = Convert.ToInt32(e.CommandArgument);
    foreach (DaySelect day in Days)
    {
        day.IsSelected = day.DayID == dayId;
    }
    rpDaysOfWeek.DataBind();
    gvHoursAttendance.DataSource = CreateWorkHours(Days.Single(d => d.IsSelected).DayID);
    gvHoursAttendance.DataBind();
}

public WorkHour[] CreateWorkHours(int dayId)
{
    return new WorkHour[]
        {
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId, Hour = 0 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId, Hour = 1 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId, Hour = 2 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId, Hour = 3 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId, Hour = 4 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId, Hour = 5 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId, Hour = 6 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId, Hour = 7 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId + 1, Hour = 8 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId + 1, Hour = 9 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId + 1, Hour = 10 },
            new WorkHour() { ActualCount = dayId, ExpectedCount = dayId + 1, Hour = 11 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId + 1, Hour = 12 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId + 1, Hour = 13 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId + 1, Hour = 14 },
            new WorkHour() { ActualCount = dayId + 1, ExpectedCount = dayId + 1, Hour = 15 },
            new WorkHour() { ActualCount = dayId * 2, ExpectedCount = dayId + 1, Hour = 16 },
            new WorkHour() { ActualCount = dayId * 2, ExpectedCount = dayId + 1, Hour = 17 },
            new WorkHour() { ActualCount = dayId * 2, ExpectedCount = dayId + 1, Hour = 18 },
            new WorkHour() { ActualCount = dayId * 2, ExpectedCount = dayId + 1, Hour = 19 },
            new WorkHour() { ActualCount = dayId - 1, ExpectedCount = dayId * 2, Hour = 20 },
            new WorkHour() { ActualCount = dayId - 1, ExpectedCount = dayId * 2, Hour = 21 },
            new WorkHour() { ActualCount = dayId - 1, ExpectedCount = dayId * 2, Hour = 22 },
            new WorkHour() { ActualCount = dayId - 1, ExpectedCount = dayId * 2, Hour = 23 },
        };
}

public class DaySelect
{
    public string DayAbbr { get; set; }
    public int DayID { get; set; }
    public bool IsSelected { get; set; }
}

public class WorkHour
{
    public int Hour { get; set; }
    public int ExpectedCount { get; set; }
    public int ActualCount { get; set; }
}