ASP.NET 中 DataGrid 的单元格合并

• 下载源代码 - 19 KB

引言

本文介绍了如何在 ASP.NET 的 Datagrid 控件中合并相邻单元格，从而为网页获得更好的外观和清晰度。在 Web 应用程序中有几种情况可以在多行中重复一些常见的值。通常，这些常见数据会针对其他列中的一组唯一数据进行显示，并产生数据重复的感觉。

在本文中，我将描述如何消除每行中的这些冗余数据，并将单元格合并在一起，然后在单元格上显示数据。

使用代码

下图显示了没有单元格合并的 DataGrid。 DataGrid 有 6 行 8 列。在这里，员工 ID 和员工姓名列上的数据在两行中重复，即，这些数据对于相邻行是通用的，并且每行中的其余数据是唯一的。

图中的红色圆圈显示 1001, Nikhil Vinod 重复了两次。这些行上的其余数据是唯一的。我们可以看到相同的模式在 DataGrid 的其余行中重复。

单元格合并可以应用于此场景。我们可以合并相邻行的员工 ID 和员工姓名单元格，并在 DataGrid 的合并单元格上显示数据。

合并员工 ID 和员工姓名列后，DataGrid 看起来像

现在，已经合并并显示了每组的员工 ID、员工姓名的数据。我们现在可以在 DataGrid 上获得非常好的数据外观。

单元格合并可以在 DataGrid 的 ItemDataBound 事件期间完成。 Cell 的 RowSpan 属性用于将单元格合并在一起。实际上，此活动会合并单元格并在该单元格上显示数据，并将现有数据向前推送，以便将数据移动到下一个相邻单元格。现在需要从 DataGrid 中删除多余的数据。 Cell 的 Remove 或 RemoveAt 属性可用于从 DataGrid 中删除数据。

protected void grdEmployee_ItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (chkChangetoNormal.Checked)
       {
       // Apply Row span for all even rows
         if (e.Item.ItemIndex % 2 == 0 )
       {
        e.Item.Cells[0].RowSpan = 2;
        e.Item.Cells[1].RowSpan = 2;
       }
       // Remove the extra cells created due to row span for odd rows
       if (e.Item.ItemIndex % 2 == 1 )
       {
        e.Item.Cells.RemoveAt(0); 
        e.Item.Cells.RemoveAt(0); 
        e.Item.Cells[1].HorizontalAlign = HorizontalAlign.Center ;
       }
    }
}

e.Item.ItemIndex 表示 DataGrid 的行 ID。第一个代码片段设置单元格的 Rowspan 属性，即员工 ID (e.Item.Cells[0]) 和员工姓名 (e.Item.Cells[2]).

结论

这是在 ASP.NET 的 DataGrid 控件中合并单元格的最简单方法。