Question

我们可以在垂直对齐中显示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>

Answer 1

您可以设置列display：block with CSS

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

Answer 2

使用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>

而且，背后的代码就是这个

using System;
using System.Data;
using System.Web.UI.WebControls;

public partial class Test_Test2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.DataSource = loadgrid();
        GridView1.DataBind();
    }
    protected void GridView1_PageIndexChanging1(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;

        GridView1.DataSource = loadgrid();
        GridView1.DataBind();
    }

    public DataSet loadgrid()
    {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable("MyData");
        DataRow dr;
        dt.Columns.Add(new DataColumn("Col1", typeof(string)));
        dt.Columns.Add(new DataColumn("Col2", typeof(string)));
        dt.Columns.Add(new DataColumn("Col3", typeof(string)));
        for (int i = 1; i <= 5; i++)
        {
            dr = dt.NewRow();
            dr[0] = "Col1 Data" + i;
            dr[1] = "Col2 Data" + i;
            dr[2] = "Col3 Data" + i;
            dt.Rows.Add(dr);
        }
        ds.Tables.Add(dt);
        return ds;
    }
}

这是一个如何在后面的代码中执行此操作的示例 http://aspdotnetcodebook.blogspot.com.au/2008/04/displaying-vertical-rows-in-gridview.html

希望这有助于你开始。

干杯！

Answer 3

        **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
    }

垂直对齐的gridview列

3 个答案: