基于Web Server的火车票查询页面优化
基于Web Server的火车票查询页面优化
上一篇已经实现了火车票查询的功能，但是页面的可视化效果并不好，本章接着上篇实现的功能，对页面进行修饰和优化。优化的内容包括：①查询窗口的修饰 ②新增【重置】按钮，并添加JS代码 ③结果显示窗口新增单元行 ④结果窗口完善，增加滚动条
1、打开完成的小程序，源代码和效果如图所示。
添加【重置】按钮
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="重置" />
添加【点击】事件
为文本框添加提示文字
2、修饰GridView，添加标题栏（因为默认的返回值属性列是英文，看的不直观）。为GridView添加“RowCreated”事件
添加如下代码（基本信息和籍贯信息只是为了演示而添加）：
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
switch (e.Row.RowType)
{
case DataControlRowType.Header:
//总表头
TableCellCollection tcHeader = e.Row.Cells;
tcHeader.Clear();
//第一行表头
tcHeader.Add(new TableHeaderCell());
tcHeader[0].Attributes.Add("bgcolor", "#ff0000");
tcHeader[0].Attributes.Add("colspan", "9"); //合并第一行的9列
tcHeader[0].Text = "列车时刻表</th></tr><tr>";
//第二行表头
tcHeader.Add(new TableHeaderCell());
tcHeader[1].Attributes.Add("bgcolor", "#00ff00");
tcHeader[1].Attributes.Add("colspan", "4");
tcHeader[1].Text = "基本信息";
tcHeader.Add(new TableHeaderCell());
tcHeader[2].Attributes.Add("bgcolor", "#00ff00");
tcHeader[2].Attributes.Add("colspan", "5");
tcHeader[2].Text = "籍贯信息</th></tr><tr>";
//第三行表头
tcHeader.Add(new TableHeaderCell());
tcHeader[3].Attributes.Add("bgcolor", "#ffff00");
tcHeader[3].Attributes.Add("width", "60");
tcHeader[3].Text = "车次";
tcHeader.Add(new TableHeaderCell());
tcHeader[4].Attributes.Add("bgcolor", "#ffff00");
tcHeader[4].Attributes.Add("width", "80");
tcHeader[4].Text = "始发站";
tcHeader.Add(new TableHeaderCell());
tcHeader[5].Attributes.Add("bgcolor", "#ffff00");
tcHeader[5].Attributes.Add("width", "80");
tcHeader[5].Text = "终点站";
tcHeader.Add(new TableHeaderCell());
tcHeader[6].Attributes.Add("bgcolor", "#ffff00");
tcHeader[6].Attributes.Add("width", "80");
tcHeader[6].Text = "发车站";
tcHeader.Add(new TableHeaderCell());
tcHeader[7].Attributes.Add("bgcolor", "#ffff00");
tcHeader[7].Attributes.Add("width", "80");
tcHeader[7].Text = "发车时间";
tcHeader.Add(new TableHeaderCell());
tcHeader[8].Attributes.Add("bgcolor", "#ffff00");
tcHeader[8].Attributes.Add("width", "80");
tcHeader[8].Text = "到达站";
tcHeader.Add(new TableHeaderCell());
tcHeader[9].Attributes.Add("bgcolor", "#ffff00");
tcHeader[9].Attributes.Add("width", "80");
tcHeader[9].Text = "到达时间";
tcHeader.Add(new TableHeaderCell());
tcHeader[10].Attributes.Add("bgcolor", "#ffff00");
tcHeader[10].Text = "里程";
tcHeader.Add(new TableHeaderCell());
tcHeader[11].Attributes.Add("bgcolor", "#ffff00");
tcHeader[11].Text = "历时</th></tr><tr>";
break;
}
}
3、为GridView添加滚动条。先将GridView嵌入一个div标签中
<div id="GridViewdiv">
<asp:GridView ID="GridView1" runat="server" BackColor="#0099CC"
BorderColor="#FFCCFF" ShowHeaderWhenEmpty="True" Height="300"
onrowcreated="GridView1_RowCreated">
</asp:GridView>
</div>
再设置此div的样式
<div id="GridViewdiv" style="width: 670px;height: 300px; overflow: auto">
但此时发现滚动条滚动时标题栏也会跟随着一起动，所以就得想方法固定标题栏。我使用的是添加表格的方法，添加表格名和标题栏。代码如下
<div style="width:670px;">
<table>
<caption> 列车时刻表</caption>
<thead>
<tr>
<td>
车次
</td>
<td>
始发站
</td>
<td>
终点站
</td>
<td>
发车站
</td>
<td>
发车时间
</td>
<td>
到达站
</td>
<td>
到达时间
</td>
<td>
里程
</td>
<td>
历时
</td>
</tr>
</thead>
</table>
</div>
并设置其样式
caption
{
width:670px;
background-color:Red;
}
td
{
width:70px;
text-align:center;
background-color:Green;
}
此时发现原表格的自带属性列还存在，所以使用上一步的方法， 在“GridView1_RowCreated”事件中仅添加一行空行即可。改变列车查询结果的背景色为浅蓝色。
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
switch (e.Row.RowType)
{
case DataControlRowType.Header:
//总表头
TableCellCollection tcHeader = e.Row.Cells;
tcHeader.Clear();
//第一行表头
tcHeader.Add(new TableHeaderCell());
tcHeader[0].Attributes.Add("bgcolor", "#000000");
tcHeader[0].Attributes.Add("colspan", "9"); //合并第一行的9列
tcHeader[0].Text = "</th></tr><tr>";
break;
}
}
地理信息科学
Writed By NX
QQ:1051926720