테이블의 구조를 다음과 같이 구현해야한다는 요구 사항이 있습니다. 데이터 소스는 동적입니다. 해당 월의 중간 값은 입니다.ASP.NET, 자바 스크립트 솔루션을 사용하여 테이블 스타일 레이아웃을 구현하는 방법
계산 된 합계 외에 데이터 소스 (날짜 및 양)가있는 경우이 종류의 테이블 스타일 레이아웃을 생성하는 제안이 있습니까?
Date Amount
==========================
1 Nov 300
22 Nov 500
30 Nov 200
Total 1000
5 Dec 100
28 Dec 200
Total 300
감사합니다.
리피터를 사용할 수 있습니다. 이 솔루션은 단지 예일 뿐이며 여러면에서 개선 될 수 있습니다.
<table>
<tr>
<th>Date</th>
<th>Amount</th>
</tr>
<asp:Repeater ID="myRepeater" runat="server" OnItemDatabound="myRepeater_Databound">
<ItemTemplate>
<tr>
<td><%# Eval("Date", "{0:dd MMM}") %></td>
<td><%# Eval("Amount") %></td>
</tr>
<tr id="trMonthlyTotal" runat="server" Visible="false">
<td>Total</td>
<td><asp:Literal id="ltMontlyTotal" runat="server" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
그런 다음 코드 숨김에서 :
int currentMonth = 0;
int monthlyTotal = 0;
protected void Page_Load(object sender, EventArgs e)
{
DataTable dtDataSource = GetData();
myRepeater.DataSource = dtDataSource;
myRepeater.DataBind();
}
protected void myRepeater_Databound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DataView dv = e.Item.DataItem as DataView;
DateTime currentDate = Convert.ToDateTime(dv["Date"]);
if (currentDate.Month != currentMonth && currentMonth != 0)
{
HtmlTable trMonthlyTotal = e.Item.FindControl("trMonthlyTotal") as HtmlTableRow;
Literal ltMonthlyTotal = e.Item.FindControl("ltMonthlyTotal") as Literal;
trMonthlyTotal.Visible = true;
ltMontlyTotal = Convert.ToString(monthlyTotal);
currentMonth = currentDate.Month;
monthlyTotal = 0;
}
else
{
monthlyTotal += Convert.ToInt32(dv["Amount"]);
if (currentMonth == 0) currentMonth = currentDate.Month;
}
}
}
왜 자바 스크립트가 필요합니까? 표 형식의 데이터입니다. 표를 사용하십시오.
<table>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 Nov</td>
<td>300</td>
</tr>
<tr>
<td>22 Nov</td>
<td>500</td>
</tr>
<tr>
<td>30 Nov</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>1000</td>
</tr>
<tr>
<td>5 Dec</td>
<td>100</td>
</tr>
<tr>
<td>28 Dec</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>300</td>
</tr>
</tbody>
</table>
나는 행 헤더의 의미에 대해 100 % 확실하지 않지만, 나는 그것이 정확하다는 것을 확신한다.
죄송합니다. 데이터 소스는 정적이 아니라 동적입니다. 동적으로 테이블 스타일 UI를 생성하려면 어떻게합니까? – Ricky
'전체'행의 셀 수가 다른 모든 셀의 개수와 같기 때문에 질문은 레이아웃에 관한 것만 큼 간단해야합니다. 이러한 행에 CSS 클래스를 적용하기 만하면 해당 클래스를 구분할 수 있습니다.
질문은 데이터를 어떻게 가져 옵니까? 그것은 총계를 포함 할 것인가, 또는 비행 중 계산되어야 하는가?
GridView, Repeater 또는 ListView를 사용하여 테이블을 만들고 컨트롤의 OnItemDataBound/OnRowDataBound 이벤트에 등록하여 누적 합계가 아니면 계산할 수없는 경우 누적 합계가되어야합니다. 이 이벤트에서 사용할 수있는 DataItem을 통해 값에 액세스 할 수 있는지, 현재 행의 월과 이전 행을 비교하여 총 행을 삽입 할시기를 알 수 있으며 카운터를 재설정 할 수 있습니다.
안녕 snomag, 귀하의 의견에 감사드립니다. – Ricky
당신은 여기에서 아이디어를 얻을 수 있습니다
<html>
<body>
<script>
var data =[
{d:1, m:'nov', a:300},
{d:22, m:'nov', a:500},
{d:30, m:'nov', a:20},
{d:5, m:'dec', a:1000},
{d:28,m:'dec', a:200},
{d:9,m:'dec', a:300}
];
var total = 0 ;
var prev='';
var htm = [];
htm.push('<table border="1">');
htm.push('<tr><th>Date</th><th>Amount</th></tr>');
for(var i=0;i<data.length;i++){
var d = data[i].d;
var m = data[i].m;
var a = data[i].a;
if(prev!='' && prev!=m){
htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
total = 0;
}
total = total + a;
prev = m;
htm.push('<tr><td>' + d + ' ' + m + '</td><td>' + a + '</td></tr>');
}
htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
htm.push('</table>');
document.write(htm.join(''));
</script>
</body>
</html>
당신은 무엇을 물어? HTML은 어떻게 작동합니까? ASP.NET은 어떻게 작동합니까? – Gidon
데이터 소스 (날짜 및 금액)를 기반으로 테이블 스틱 UI를 동적으로 생성 함을 의미합니다. – Ricky