我正在开发一个 web 应用程序，用户可以在其中登记费用，我有一个页面显示每天所有登记表的报告，这些登记表来自数据库。 为了显示这些寄存器，我有一个显示日期的 DataList，在其下方有一个用于显示寄存器的 GridView。
假设用户在不同的日子登记了不同数量的费用，如果我向用户显示报告，GridView 将完全错位，因为行数不同；基本上，我有这样的事情:
是否有某种方法可以对齐 GridView 以显示对齐的寄存器？
最佳答案
我能够在我这边复制你的问题。我所做的就是将这个样式规则添加到我的页面:
td
{
vertical-align:top;
}
下面是在固定对齐的 ASP.NET Web 窗体中的 DataList 中显示 GridView 的完整示例。
代码隐藏:
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.UI.WebControls;
namespace WebApplication6
{
public partial class DataListAndGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var dt = new DataTable();
dt.Columns.Add(new System.Data.DataColumn("ID", typeof(String)));
dt.Columns.Add(new System.Data.DataColumn("Day", typeof(String)));
AddRow("0", "MONDAY", dt);
AddRow("1", "TUESDAY", dt);
AddRow("2", "WEDNESDAY", dt);
AddRow("3", "THURSDAY", dt);
AddRow("4", "FRIDAY", dt);
AddRow("5", "SATURDAY", dt);
AddRow("6", "SUNDAY", dt);
daysOfWeek.DataSource = dt;
daysOfWeek.DataBind();
}
private void AddRow(string id, string day, DataTable dt)
{
DataRow row;
row = dt.NewRow();
row[0] = id;
row[1] = day;
dt.Rows.Add(row);
}
private void BindGrid(GridView gv, int id)
{
gv.DataSource = this.GetRegisters(id);
gv.DataBind();
}
protected void daysOfWeek_ItemDataBound(object sender, DataListItemEventArgs e)
{
object dataKey = daysOfWeek.DataKeys[e.Item.ItemIndex];
int key = Convert.ToInt32(dataKey);
GridView gridResponses = (GridView)e.Item.FindControl("gvResponses");
BindGrid(gridResponses, key);
}
public List<Register> GetRegisters(int id)
{
List<Register> registers = new List<Register>();
registers.Add(new Register() { DayID = 0, FirstName = "Monday Name 1", LastName = "Monday Surname 1" });
registers.Add(new Register() { DayID = 0, FirstName = "Monday Name 2", LastName = "Monday Surname 2" });
registers.Add(new Register() { DayID = 1, FirstName = "Tuesday Name 1", LastName = "Tuesday Surname 1" });
registers.Add(new Register() { DayID = 1, FirstName = "Tuesday Name 1", LastName = "Tuesday Surname 2" });
return registers.Where(r => r.DayID == id).ToList();
}
}
public class Register
{
public int DayID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataListAndGrid.aspx.cs" Inherits="WebApplication6.DataListAndGrid" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#dayContainer {
width: 250px;
height: 70px;
font-size: 20px;
border: 2px solid black;
text-align: center;
vertical-align: middle;
display:table-cell;
}
#gridContainer {
border: 2px solid black;
border-top: none;
width: 250px;
}
td
{
vertical-align:top;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="daysOfWeek" DataKeyField="ID" runat="server" RepeatDirection="Horizontal" OnItemDataBound="daysOfWeek_ItemDataBound">
<ItemTemplate>
<div style="float:left;">
<div id="dayContainer">
<%# DataBinder.Eval(Container.DataItem,"Day") %>
</div>
<div id="gridContainer">
<asp:GridView runat="server" ID="gvResponses" DataKeyNames="DayID" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" HeaderStyle-Width="125px" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" HeaderStyle-Width="125px" />
</Columns>
</asp:GridView>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
输出:
关于c# - 如何将 GridView 与 DataList 中的不同行数对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37289357/