DataGrid应用（三）——排序

DataView 提供了几项用于对 DataTable 中的数据进行排序和筛选的功能：

• 使用 Sort 属性，可以指定单个或多个列排序顺序并包含 ASC（升序）和 DESC（降序）参数。
• 可以使用 ApplyDefaultSort 属性自动以升序创建基于表的一个或多个主键列的排序顺序。只有当 Sort 属性为空引用或空字符串时以及表已定义主键时，ApplyDefaultSort 才适用。
• 使用 RowFilter 属性，可以根据行的列值来指定行的子集。有关 RowFilter 属性的有效表达式的更多信息，请参见有关 DataColumn 类的 <link keywords="frlrfSystemDataDataColumnClassExpressionTopic"> 属性的参考信息。
• 使用 RowStateFilter 属性，可以指定要查看的行版本。DataView 根据基础行的 RowState 来隐式地管理要公开哪些行版本。

所以利用 DataView 的特点，我们可以实现 DataGrid 对列的排序。我实现这样一个DataGrid可以点击各个列头，对不同列进行排序。其原理是： 在客户端触发事件提交到服务端，服务端根据不同的列名对同一个DataTable进行操作生成不同的DataView绑定到 DataGrid， 实现排序的效果。

因为表头是我自定义的div， 所以我需要一个隐藏域来区别客户端提交过来的事件。另外我需要一个隐藏域来获得客户端点击的是哪一列。（保存点击的列名）

在aspx页里有如下两个隐藏域：

<input id="command" type="hidden" name="command" runat="server">

<input id="sortCol" type="hidden" name="sortCol" runat="server">

表头设计如下：

<table id="caption" cellSpacing="0" cellPadding="0" width="604" border="1"><tr style="BACKGROUND-COLOR: buttonface">

<td id="tdName" style="CURSOR: hand" onclick="ClickTitle(this)" width="30%" runat="server">Name</td>

<td id="tdTitle" style="CURSOR: hand" onclick="ClickTitle(this)" width="30%" runat="server">Title</td>

<td id="tdTelephone" style="CURSOR: hand" onclick="ClickTitle(this)" width="30%" runat="server">Telepone</td>

</tr></table>

点击表头中各个列头的时候，将触发客户端onclick事件执行客户端脚本ClickTitle()

function ClickTitle(item)

{

item.setAttribute("bgcolor", "#999999", 0);

document.getElementById("command").value = "sort";

document.getElementById("sortCol").value = item.innerText;

document.forms[0].submit();

}

这个方法，将隐藏域command赋值为sort， 同时将被点击的列名保存在隐藏域sortCol中，提交到服务端。

服务端在Page_Load()的方法中处理来自客户端的不同请求。

（为了方便操作，代码里把数据源DataTable，DataView定义为类成员变量）

private void Page_Load(object sender, System.EventArgs e)

{

if(!this.IsPostBack)

{

BindData();

}

if(this.command.Value == "sort")

{

BindData();

// sortedDataView是对DataTable重新排序后的DataView

DataView sortedDataView = new DataView(dt, "", this.sortCol.Value.TrimEnd('5'), DataViewRowState.CurrentRows);

switch(this.sortCol.Value)

{

case "Name":

this.tdName.InnerHtml = "Name<span style='FONT-FAMILY: Marlett;'>5</span>";

this.tdTitle.InnerHtml = "Title";

this.tdTelephone.InnerHtml = "Telephone";

break;

case "Title":

this.tdTitle.InnerHtml = "Title<span style='FONT-FAMILY: Marlett'>5</span>";

this.tdName.InnerHtml = "Name";

this.tdTelephone.InnerHtml = "Telephone";

break;

case "Telephone":

this.tdTelephone.InnerHtml = "Telephone<span style='FONT-FAMILY: Marlett'>5</span>";

this.tdTitle.InnerHtml = "Title";

this.tdName.InnerHtml = "Name";

break;

default:

break;

}

this._MyDataView = sortedDataView;

this.DataGrid1.DataSource = sortedDataView;

this.DataGrid1.DataBind();

this.command.Value = "";

this.sortCol.Value = "";

}

}

每次在排序的时候，数据都需要重新绑定，即调用BindData()方法。

private void BindData()

{

string strConn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";

string strDataSource = Server.MapPath(@"../DB/data.mdb");

strConn = strConn + strDataSource;

OleDbConnection objConn = null;

OleDbDataAdapter objDataAdapter = null;

string strSql = "select Name, Title, Telephone from data";

try

{

objConn = new OleDbConnection(strConn);

objDataAdapter = new OleDbDataAdapter(strSql, objConn);

dt = new DataTable();

objDataAdapter.Fill(dt);

this._MyDataView = dt.DefaultView;

this.DataGrid1.DataSource = this._MyDataView;

this.DataGrid1.DataBind();

}

catch(Exception ex)

{

this.Response.Write(ex.Message);

}

}

注： <span style='FONT-FAMILY: Marlett'>5</span> 是显示在列头里朝上箭头的。所以在调用DataView的构造方法的时候需要去掉多余的这个字符。<!--EndFragment--><!--EndFragment--><!--EndFragment-->