私は、ユーザーが費用を登録できるWebアプリケーションを開発しています。私は1日あたりのすべてのレジスタのレポートを表示するページを持っています。これらのレジスタはデータベースから来ています。 これらのレジスタを表示するには、日が表示されるDataListがあり、その下に、レジスタを表示するGridViewがあります。DataList内の異なる行数でGridViewを整列するにはどうすればよいですか？
ユーザーが別の日に別々の経費を登録したとすると、レポートをユーザーに表示すると、行数が異なるため、GridViewの位置が完全にずれています。
整列のレジスタを表示するためのGridViewを整合させるいくつかの方法があります：基本的に、私はこのようなものがありますか？
私はそれが私のページに、このスタイルルールを追加した修正するためにやった私のside.Allであなたの問題を再現することができました：
以下td
{
vertical-align:top;
}
は、DataListコントロール内のGridViewの表示の完全な例でありますASP.NET Webフォームで整列を修正しました。背後
コード：
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>
出力：
