首页 > 解决方案 > asp.net:在gridview 或listview 或其他数据控件中显示数据?

问题描述

自从我在 asp.net 中使用数据控件以来已经有一段时间了,所以就到这里吧。

我的 tsql 查询返回这个数据表:

State          City            First              Last        
----------------------------------------------------------
Florida        Miami           Bob                Jones   
Florida        Miami           Joe                James
Florida        Miami           Mary               Hart
Florida        Miami           Jane               Smith
Florida        Orlando         Tina               Karl
Florida        Orlando         George             Williams 
Florida        Orlando         Ralph              Davis

我想要一些简单的数据控件,可以像这样显示数据,没有太多麻烦。我只是不想为每一行重复州/城市:

Florida      Miami
      Bob                Jones   
      Joe                James
      Mary               Hart
      Jane               Smith
Florida      Orlando
      Tina               Karl
      George             Williams 
      Ralph              Davis

标签: c#asp.nettelerik

解决方案


我建议您使用列表视图。

你可以这样做:

首先,使用向导布置列表视图(为您创建)。

删除所有模板 - 仅保留在项目模板中。

所以结果是这样的:

        <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 跨度从 2 更改为 1,甚至删除 col 跨度。


推荐阅读