改善DataGrid的默分使其更友好_.NET教程_编程技术
改善DataGrid的默 分 使其更友好
DataGrid是.net平台下 Web 用程序最常用的控件，使用 控件可以 助您 注 商 的 ， 的 示交 它 理就好了， 要 的 置一些相 的 性，一 漂亮的表格就出 了，同 ，它提供的模板列更大的提高了它的可 程性，使我 的 更加 活，想想都 得 是一件 的事！然而，令人感 美中不足的是，它的分 功能 在是不怎 ，光 的 字 在上面，既 有 信息又 有跳 功能，我想， 的用 太乏味了一 吧！於是我就想能不能改善它的分 功能呢，使它具 上述功能！恩， 在想法有了， 剩下如何 ？先 我 想一下，DataGrid最 在客 端表 一 table，也就是 服 器 DataGrid解析 一段以<table> 始</table> 束的html代 ，然後 段代 送到 求 面的客 端， 注意 程是先解析然後 送，既然 程是 的，那 也就迎刃而解了，我 可以在解析後 送前 段 控件增加新的功能啊！接下 的 是我要如何 截到 段 整 程停住去 行我 的代 ， 急，先 我 了解一下DataGrid的 成 ，DataGrid由行集和列集 成，它 分 在服 端表 DataGrid.Items和DataGrid.Columns，DataGrid分 是一 DataGridItem，包含在整 Items集合中，每 DataGrid在 建一 Item ，都 引 一 ItemCreated事件，我 可以通 捕捉 事件 取"DataGrid分 " 象， 在 象呈 至它包含的Page 象 ，也就是 生PreRender事件 ， 代 其加入新功能，如下所示：
private void dgProducts_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Pager)
{
// 取DataGrid分 象 其指定PreRender事件的 理函
pagerItem = e.Item;
pagerItem.PreRender += new System.EventHandler(this.pagerItem_PreRender);
}
}
private void pagerItem_PreRender(object sender, EventArgs e)
{
// 事件 理代 面 信息以及跳 功能
.......
} 由於在 行上述事件 DataGrid已 解析生成了html，所以我 也 能向其中添加html代 所需的功能。最 生成的新的分 如下 所示：
在 跳 功能 我使用JavaScript 用 在文本框中 入的值保存在一 Html 藏字段 ，然後在服 端 取 藏字段的值， DataGrid指定到 ，我曾 用URL 的方式 指定window.location 新的URL字符串，可是使用window.location 致Page_Load() 行 次。 而得不到想要的 果。我也考 使用ViewState，可那 文本框和按 是 添加 去的Html ，事先 有在服 端定 ，又如何操控它 呢！於是 念 也就一 而 了！到最後也 有 用" 藏字段" 不怎 高 但 能解 的方法。以下是 "go"按 行的JavaScript函 ：
function go(ctrl,max)
{
// 用 入值是否符合要求
if(ctrl.value >= 1 && ctrl.value <= max.innerText)
{
// 入值保存到 藏字段
document.all.PageNum.value = ctrl.value;
}
else
{
alert('您 入的 必 是符合 面要求的 字,最大值是：'+max.innerText);
ctrl.value="";
ctrl.focus();
return false;
}
}
全部代 如下：
.Apsx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace Sky_MsdnDataGrid
{
/// <summary>
/// SortDataGrid 的摘要描述。
/// </summary>
public class SortDataGrid : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgProducts;
private string connStr;
private string cmdText;
private DataGridItem pagerItem;
protected System.Web.UI.HtmlControls.HtmlInputHidden PageNum;
private int pagerNum = 1;
private DataTable productTable;
private void Page_Load(object sender, System.EventArgs e)
{
// 面加 判 藏字段中是否有值，如果有值代表用 使用了跳 功能， DataGrid的 前 用 指定
if (this.PageNum.Value != string.Empty)
{
this.dgProducts.CurrentPageIndex = Convert.ToInt32(this.PageNum.Value) - 1;
if (ViewState["SortExprName"] != null)
this.BindData("select * from Products order by " + ViewState["SortExprName"].ToString() + " asc");
else
this.BindData("select * from Products");
this.PageNum.Value = string.Empty;
}
else
{
this.BindData("select * from Products");
}
}
// 定
private void BindData(string sqlText)
{
this.connStr = "server=localhost;database=NorthWind;uid=sa";
this.cmdText = sqlText;
SqlConnection conn = new SqlConnection();
SqlCommand cmd = new SqlCommand();
SqlDataAdapter adapter = new SqlDataAdapter();
productTable = new DataTable("Products");
conn.ConnectionString = this.connStr;
cmd.CommandType = CommandType.Text;
cmd.CommandText = this.cmdText;
cmd.Connection = conn;
adapter.SelectCommand = cmd;
adapter.Fill(productTable);
this.dgProducts.DataSource = productTable;
this.dgProducts.DataBind();
}
#region Web Form 工具 生的程式
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 此 ASP.NET Web Form 工具所需的呼叫。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 此 工具支援所必 的方法 - 勿使用程式 器修改
/// 方法的 容。
/// </summary>
private void InitializeComponent()
{
this.dgProducts.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dgProducts_ItemCreated);
this.dgProducts.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.dgProducts_PageIndexChanged);
this.dgProducts.SortCommand += new System.Web.UI.WebControls.DataGridSortCommandEventHandler(this.dgProducts_SortCommand);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
// 排序功能
private void dgProducts_SortCommand(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
{
this.dgProducts.CurrentPageIndex = 0;
ViewState["SortExprName"] = e.SortExpression;
this.BindData("select * from Products order by "+ e.SortExpression + " asc");
}
private void dgProducts_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
this.dgProducts.CurrentPageIndex = e.NewPageIndex;
if (ViewState["SortExprName"] != null)
this.BindData("select * from Products order by " + ViewState["SortExprName"].ToString() + " asc");
else
this.BindData("select * from Products");
}
private void dgProducts_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Pager)
{
// 取DataGrid分 象 其指定PreRender事件的 理函
pagerItem = e.Item;
pagerItem.PreRender += new System.EventHandler(this.pagerItem_PreRender);
}
}
private void pagerItem_PreRender(object sender, EventArgs e)
{
if (this.pagerNum == 1)
{
this.pagerNum = this.pagerNum - 1;
return;
}
// currentPageNum- 前 recordCount- pageCount-
string currentPageNum = Convert.ToString(this.dgProducts.CurrentPageIndex + 1);
string recordCount = this.productTable.Rows.Count.ToString();
string pageCount = this.dgProducts.PageCount.ToString();
// 建 元格包含 面 信息
TableCell groupCell = new TableCell();
groupCell.Text = "<b><font face=' 楷 ' size=3><font color=OliveDrab> 前第</font><font color=red>" + currentPageNum + "</font><font color=OliveDrab> 每 <font color=red>" + this.dgProducts.PageSize.ToString() + "</font> (" +
"共</font><font color=red>" + recordCount + "</font><font color=OliveDrab> ，共</font><font color=red><label id='maxPage'>" + pageCount + "</label></font><font color=OliveDrab> )</font></font></b>";
// 建 元格包含跳 功能
TableCell operCell = new TableCell();
operCell.Text = "<input type='text' id='textbox' name='T1' size='4' style='border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px'> " +
"<input type='submit' value='go' name='B1' >";
// pagerItem.Cells[0]代表DataGrid默 分 ， 其所跨列 1
pagerItem.Cells[0].ColumnSpan = 1;
groupCell.HorizontalAlign = HorizontalAlign.Left;
groupCell.ColumnSpan = this.dgProducts.Columns.Count - 2;
operCell.HorizontalAlign = HorizontalAlign.Right;
pagerItem.Cells.AddAt(0,groupCell);
pagerItem.Cells.AddAt(2,operCell);
}
}
}
.Aspx
<%@ Page language="c#" Codebehind="SortDataGrid.aspx.cs" AutoEventWireup="false" Inherits="Sky_MsdnDataGrid.SortDataGrid" %>
<!DOCTYPE HTML PUBLIC "-//W
<HTML>
<HEAD>
<title>SortDataGrid</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
function go(ctrl,max)
{
// 用 入值是否符合要求
if(ctrl.value >= 1 && ctrl.value <= max.innerText)
{
// 入值保存到 藏字段
document.all.PageNum.value = ctrl.value;
}
else
{
alert('您 入的 必 是符合 面要求的 字,最大值是：'+max.innerText);
ctrl.value="";
ctrl.focus();
return false;
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="dgProducts" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 16px" runat="server" Width="100%" AllowSorting="True" AutoGenerateColumns="False" AllowPaging="True">
<FooterStyle ForeColor="#
<SelectedItemStyle Font-Bold="True" ForeColor="#F
<AlternatingItemStyle Font-Size="X-Small" BackColor="#CCFFFF"></AlternatingItemStyle>
<ItemStyle Font-Size="X-Small" BackColor="White"></ItemStyle>
<HeaderStyle Font-Size="X-Small" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BackColor="#99CCCC"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="ProductID" HeaderText=" 品 ">
<HeaderStyle Width="15%"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="SupplierID" HeaderText="供 商 ">
<HeaderStyle Width="15%"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="ProductName" SortExpression="ProductName" HeaderText=" 品名 ">
<HeaderStyle HorizontalAlign="Left" Width="30%"></HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="UnitPrice" SortExpression="UnitPrice" HeaderText=" 品 ">
<HeaderStyle Width="20%"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="UnitsInStock" SortExpression="UnitsInStock" HeaderText="供 ">
<HeaderStyle Width="20%"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
</Columns>
<PagerStyle Font-Size="X-Small" HorizontalAlign="Center" ForeColor="#
</asp:DataGrid>
<INPUT style="Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 256px" id="PageNum" runat="server" type="hidden">
</form>
</body>
</HTML>
最 行效果：
