Asp.net 垂直对齐的gridview列

Asp.net 垂直对齐的gridview列,asp.net,gridview,Asp.net,Gridview,我们能否以垂直对齐方式显示gridview。我需要以垂直对齐方式显示我的gridview中的所有列。我需要显示所有三列,但只显示一条记录一次。谁来解释一下 <asp:GridView ID="View" ShowFooter="True" runat="server" AutoGenerateColumns="false" HeaderStyle-CssClass="header" DataKeyNames="CustomerCode" cellpa

我们能否以垂直对齐方式显示
gridview
。我需要以垂直对齐方式显示我的
gridview
中的所有列。我需要显示所有三列,但只显示一条记录一次。谁来解释一下

<asp:GridView ID="View" ShowFooter="True" runat="server" AutoGenerateColumns="false" HeaderStyle-CssClass="header"
                    DataKeyNames="CustomerCode" cellpadding="4" OnPageIndexChanging="View_PageIndexChanging"
                    OnSorting="View_Sorting" OnRowDataBound= "View_RowDataBound" GridLines="None" OnSelectedIndexChanging="View_SelectedIndexChanging"
                    AllowPaging="True" AllowSorting="True" CssClass="style2" ForeColor="#333333">
            <FooterStyle BackColor="#555555" ForeColor="White" Font-Bold="True" />

            <Columns>
                <asp:BoundField DataField="CustomerCode" HeaderText="Customer Code" SortExpression="CustomerCode" >
                    <ItemStyle HorizontalAlign="Center" Width="300px" />
                </asp:BoundField>
                <asp:BoundField DataField="CustomerName" HeaderText="Customer Name" SortExpression="CustomerName" >
                    <ItemStyle HorizontalAlign="Center" Width="300px" />
                </asp:BoundField>
                <asp:BoundField DataField="PointBalance" HeaderText="Point Balance" SortExpression="PointBalance" >
                    <ItemStyle HorizontalAlign="Center" /> 
                </asp:BoundField>
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#777777" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#555555" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>

您可以使用CSS设置列显示:块

table.style2, table.style2 tr, table.style2 td{
  display:block;
}

使用GridView有很多方法

  • 下面是一个使用模板列和HTML表的方法
  • 您的.aspx页面应该如下所示

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test_Test2" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
          <asp:GridView ID="GridView1" runat="server" ShowHeader="False" AllowSorting="True" AutoGenerateColumns="false"
                AllowPaging ="True" PageSize ="1"
                onpageindexchanging="GridView1_PageIndexChanging1">
              <Columns>
                  <asp:TemplateField>
                  <ItemTemplate >
                  <table>
                  <tr>
                    <td style="font-weight:bold">Column 1:</td><td><%# Eval("col1")%></td>
                  </tr>
                  <tr>
                    <td style="font-weight:bold">Column 2:</td><td><%# Eval("col2")%></td>
                  </tr>
                  <tr>
                    <td style="font-weight:bold">Column 3:</td><td><%# Eval("col3")%></td>
                  </tr>
                  </table>
                  </ItemTemplate>
    
                  </asp:TemplateField>
              </Columns>
              </asp:GridView>
        </div>
        </form>
    </body>
    </html>
    
    
    
    希望这对你有所帮助

    干杯

    **带有固定标题的可滚动GridView Asp.Net**
    
            **Scrollable GridView With Fixed Headers Asp.Net**
    
            <form id="form1" runat="server">
            <div>
            <asp:Panel ID="Panel1" runat="server" Height="200px" 
                                   Width="200px" ScrollBars="Vertical">
    
            <asp:GridView ID="GridView1" runat="server" 
                          AutoGenerateColumns="False" DataKeyNames="ID"
                          DataSourceID="SqlDataSource1"
                          RowStyle-VerticalAlign="Bottom"
                          OnRowDataBound="GridView1_RowDataBound">
            <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" 
                            InsertVisible="False" 
                            ReadOnly="True" SortExpression="ID" />
            <asp:BoundField DataField="Name" HeaderText="Name" 
                                             SortExpression="Name" />
            <asp:BoundField DataField="Location" HeaderText="Location" 
                                         SortExpression="Location" />
            </Columns>
            <HeaderStyle CssClass="header"Height="20px" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">
            </asp:SqlDataSource>
            </asp:Panel>
            </div>
            </form>
    
        /*CSS*/
        01
        <head runat="server">
        02
        <title>Creating scrollable GridView with fixed headers</title>
        03
        <style type="text/css">
        04
          .header
        05
          {
        06
            font-weight:bold;
        07
            position:absolute;
        08
            background-color:White;
        09
          }
        10
          </style>
        11
        </head>
    
    /*.aspx page code*/
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    2
        {
    3
    
    4
            if (e.Row.RowType == DataControlRowType.DataRow)
    5
            {
    6
                if(e.Row.RowIndex == 0)
    7
               e.Row.Style.Add("height","40px");
    8
            }
    9
        }
    
    /*CSS*/ 01 02 创建具有固定标题的可滚动GridView 03 04 .标题 05 { 06 字体大小:粗体; 07 位置:绝对位置; 08 背景色:白色; 09 } 10 11 /*.aspx页面代码*/ 受保护的void GridView1_RowDataBound(对象发送方,GridViewRowEventArgs e) 2. { 3. 4. 如果(e.Row.RowType==DataControlRowType.DataRow) 5. { 6. 如果(e.Row.RowIndex==0) 7. e、 行。样式。添加(“高度”,“40px”); 8. } 9 }
    您需要重写您的问题并添加示例代码以帮助我编辑我的问题,先生..您想做什么?它应该是什么样子?所有的列都应该是垂直的..我的意思是像行。先生,你能给我看屏幕截图吗?或者你能用油漆给我看一个样品吗?
            **Scrollable GridView With Fixed Headers Asp.Net**
    
            <form id="form1" runat="server">
            <div>
            <asp:Panel ID="Panel1" runat="server" Height="200px" 
                                   Width="200px" ScrollBars="Vertical">
    
            <asp:GridView ID="GridView1" runat="server" 
                          AutoGenerateColumns="False" DataKeyNames="ID"
                          DataSourceID="SqlDataSource1"
                          RowStyle-VerticalAlign="Bottom"
                          OnRowDataBound="GridView1_RowDataBound">
            <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" 
                            InsertVisible="False" 
                            ReadOnly="True" SortExpression="ID" />
            <asp:BoundField DataField="Name" HeaderText="Name" 
                                             SortExpression="Name" />
            <asp:BoundField DataField="Location" HeaderText="Location" 
                                         SortExpression="Location" />
            </Columns>
            <HeaderStyle CssClass="header"Height="20px" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">
            </asp:SqlDataSource>
            </asp:Panel>
            </div>
            </form>
    
        /*CSS*/
        01
        <head runat="server">
        02
        <title>Creating scrollable GridView with fixed headers</title>
        03
        <style type="text/css">
        04
          .header
        05
          {
        06
            font-weight:bold;
        07
            position:absolute;
        08
            background-color:White;
        09
          }
        10
          </style>
        11
        </head>
    
    /*.aspx page code*/
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    2
        {
    3
    
    4
            if (e.Row.RowType == DataControlRowType.DataRow)
    5
            {
    6
                if(e.Row.RowIndex == 0)
    7
               e.Row.Style.Add("height","40px");
    8
            }
    9
        }