我建议你使用列表视图。
你可以这样做：
首先，使用向导布置列表视图（为您创建）。
删除所有模板 - 只保留在项目模板中。
所以结果是这样的：
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr style="">
<td><asp:Label ID="ProvinceLabel" runat="server" Text='<%# Eval("Province") %>' /></td>
<td><asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' /></td>
<td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
<td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>
<td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">Province</th>
<th runat="server">City</th>
<th runat="server">HotelName</th>
<th runat="server">FirstName</th>
<th runat="server">LastName</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
输出如下：
加载网格的代码？到目前为止，我们有这个：
protected void Page_Load(object sender, System.EventArgs e)
{
if (IsPostBack == false)
loadGrid();
}
public void loadGrid()
{
string strSQL;
strSQL = "SELECT Province, City, HotelName, FirstName, LastName from tblHotels ORDER BY Province, City";
using (SqlCommand cmdSQL = new SqlCommand(strSQL, new SqlConnection(My.Settings.TEST3)))
{
cmdSQL.Connection.Open();
ListView1.DataSource = cmdSQL.ExecuteReader;
ListView1.DataBind();
}
}
好的，所以我们假设前两列按照上面的顺序正确排序。
但是，现在让我们在上面添加一个分组。
我们的项目模板因此变成了这样：
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr id="MyGroupHeading" runat="server" style="display:normal">
<td><asp:Label ID="Province" runat="server" Text='<%# Eval("Province") %>' /></td>
<td><asp:Label ID="City" runat="server" Text='<%# Eval("City") %>' /></td>
</tr>
<tr>
<td colspan="2"></td>
<td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
<td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>
<td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
</tr>
</ItemTemplate>
所以，请注意我们刚刚添加了一个“tr”（表格行）
现在，我们可以像这样隐藏/显示这个额外的标题：
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
ListViewDataItem LvRow = e.Item;
if (LvRow.ItemType == ListViewItemType.DataItem)
{
var strNewGroup = (Label)LvRow.FindControl("Province").Text;
strNewGroup += "*" + (Label)LvRow.FindControl("City").Text;
HtmlTableRow MyTr = (HtmlTableRow)LvRow.FindControl("MyGroupHeading");
if (strNewGroup != strMyGroup)
{
// a new group -
strMyGroup = strNewGroup;
MyTr.Style("display") = "normal";
}
else
MyTr.Style("display") = "none";
}
}
所以我们实际上只是手动编写代码。结果现在看起来像这样；
然后格式化？好吧，如果我放弃我的默认 css 表格格式，那么我会得到/看到这个：
我想，如果我们愿意，我们可以将子组拉到左边。
<tr>
<td colspan="2"></td>
<td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
<td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>
<td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
</tr>
将上面的 col span 从 2 更改为 1，甚至删除 col span。