在C# GridView中实现跨多单元格（含部分单元格）的按钮定位

我来帮你搞定这个需求——要在按小时划分的GridView里展示非整点开始/结束的任务，核心是计算任务在每个小时单元格内的占比，然后通过动态生成带样式的按钮来模拟跨部分单元格的效果。下面是具体的实现步骤和代码：

1. 核心思路 #

• 先计算任务与每个小时单元格的时间交集，得出任务在该单元格内的起始偏移量和宽度占比（用百分比表示）。
• 利用GridView的RowDataBound事件，在每个匹配的单元格里动态生成按钮，通过CSS相对定位调整按钮的位置和宽度，让它看起来“跨”部分单元格。
• 用DataTable存储任务的基本信息（名称、开始/结束时间），作为GridView的数据源。

2. 具体实现代码 #

2.1 前台GridView配置 #

首先在ASPX页面里定义GridView，关闭自动生成列，预留任务名称列，并绑定行绑定事件：

<asp:GridView ID="gvGantt" runat="server" 
              OnRowDataBound="gvGantt_RowDataBound" 
              AutoGenerateColumns="false" 
              CellPadding="0" 
              CellSpacing="0"
              Width="100%">
    <Columns>
        <asp:BoundField DataField="TaskName" HeaderText="任务名称" ItemStyle-Width="120px" />
    </Columns>
    <RowStyle Height="35px" />
    <HeaderStyle BackColor="#e9ecef" Font-Bold="true" />
    <ItemStyle BorderColor="#dee2e6" BorderWidth="1px" />
</asp:GridView>

2.2 后台构建数据源与动态列 #

在Page_Load里创建DataTable存储任务数据，并根据需要的小时范围动态生成GridView的小时列：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 1. 构建任务数据源
        DataTable taskTable = new DataTable();
        taskTable.Columns.Add("TaskName", typeof(string));
        taskTable.Columns.Add("StartTime", typeof(DateTime));
        taskTable.Columns.Add("EndTime", typeof(DateTime));
        
        // 添加你的示例任务：10:25 → 11:15
        taskTable.Rows.Add("需求评审会", new DateTime(2024, 1, 1, 10, 25, 0), new DateTime(2024, 1, 1, 11, 15, 0));

        // 2. 动态生成小时列（这里示例生成10点到12点的列，可根据实际范围调整）
        for (int hour = 10; hour <= 12; hour++)
        {
            TemplateField hourColumn = new TemplateField();
            hourColumn.HeaderText = $"{hour}:00";
            hourColumn.ItemStyle.Width = Unit.Percentage(100 / (12 - 10 + 1)); // 平均分配宽度
            gvGantt.Columns.Add(hourColumn);
        }

        // 3. 绑定数据源
        gvGantt.DataSource = taskTable;
        gvGantt.DataBind();
    }
}

2.3 处理行绑定事件，生成动态按钮 #

在RowDataBound事件里，计算每个任务在对应小时单元格的位置和宽度，生成带样式的按钮：

protected void gvGantt_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // 只处理数据行
    if (e.Row.RowType != DataControlRowType.DataRow) return;

    DataRowView taskRow = (DataRowView)e.Row.DataItem;
    DateTime taskStart = (DateTime)taskRow["StartTime"];
    DateTime taskEnd = (DateTime)taskRow["EndTime"];

    // 遍历所有小时列（从索引1开始，索引0是任务名称列）
    for (int colIndex = 1; colIndex < gvGantt.Columns.Count; colIndex++)
    {
        // 获取当前列对应的小时
        int currentHour = int.Parse(gvGantt.Columns[colIndex].HeaderText.Split(':')[0]);
        DateTime hourStart = new DateTime(taskStart.Year, taskStart.Month, taskStart.Day, currentHour, 0, 0);
        DateTime hourEnd = hourStart.AddHours(1);

        // 判断任务是否与当前小时有交集
        if (taskStart < hourEnd && taskEnd > hourStart)
        {
            // 计算任务在当前小时内的起始偏移和持续时长
            TimeSpan overlapStart = taskStart > hourStart ? taskStart - hourStart : TimeSpan.Zero;
            TimeSpan overlapEnd = taskEnd < hourEnd ? taskEnd - hourStart : TimeSpan.FromHours(1);
            TimeSpan overlapDuration = overlapEnd - overlapStart;

            // 创建任务按钮
            Button taskBtn = new Button();
            taskBtn.Text = taskRow["TaskName"].ToString();
            taskBtn.CssClass = "gantt-task-btn";

            // 计算样式百分比：偏移量和宽度
            double leftOffset = (overlapStart.TotalMinutes / 60) * 100;
            double btnWidth = (overlapDuration.TotalMinutes / 60) * 100;

            // 设置按钮样式，实现位置和宽度控制
            taskBtn.Style.Add("position", "relative");
            taskBtn.Style.Add("left", $"{leftOffset:F2}%");
            taskBtn.Style.Add("width", $"{btnWidth:F2}%");
            taskBtn.Style.Add("background-color", "#2563eb");
            taskBtn.Style.Add("color", "#fff");
            taskBtn.Style.Add("border", "none");
            taskBtn.Style.Add("border-radius", "3px");
            taskBtn.Style.Add("padding", "4px 6px");
            taskBtn.Style.Add("font-size", "12px");
            taskBtn.Style.Add("white-space", "nowrap");
            taskBtn.Style.Add("overflow", "hidden");
            taskBtn.Style.Add("text-overflow", "ellipsis");

            // 单元格设置相对定位，让按钮可以偏移
            e.Row.Cells[colIndex].Style.Add("position", "relative");
            e.Row.Cells[colIndex].Controls.Add(taskBtn);
        }
    }
}

3. 关键细节说明 #

• 时间交集计算：通过判断任务的开始/结束时间与当前小时的起止时间，确定是否需要在该单元格生成按钮。
• 样式控制：用相对定位和百分比宽度，让按钮在单元格内精准对应任务的时间区间——比如10点单元格里的按钮会从25分钟位置（≈41.67%偏移）开始，占35分钟（≈58.33%宽度）；11点单元格里的按钮占15分钟（25%宽度）。
• 扩展性：如果任务跨多个完整小时（比如10:25到13:15），中间的11、12点单元格里的按钮宽度会自动设为100%，完美适配。

内容的提问来源于stack exchange，提问作者Varun Sharma