[C#][ASP.NET]利用tinysort plugins排序GridView
排序功能我想是每個使用者所需要的，雖然GridView已內建排序功能，
但個人比較喜歡在client直接做掉，這裡我將套用TinySort來完成這小需求。
.aspx
引用相關js，
將需要排序的欄位轉換成樣板，並在HeaderTemplate中插入<a href="javascript:sortTable(1)">姓名</a>…等。
.aspx.cs
protected void Page_Load( object sender, EventArgs e )
{
if( !IsPostBack )
{
//註冊jquery tinysort
BuiljScript();
//取得DataTable資料
GridView1.DataSource = GetDate();
GridView1.DataBind();
//Add the <thead> and <tbody> elements
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
private void BuiljScript()
{
string Jscript = "var aAsc = [];";
Jscript += "function sortTable(nr) {";
Jscript += "aAsc[nr] = aAsc[nr] == 'asc' ? 'desc' : 'asc'; ";
Jscript += "$('#" + GridView1.ClientID +">tbody>tr').tsort('td:eq(' + nr + ')', { order: aAsc[nr] });";
Jscript += " }";
ScriptManager.RegisterStartupScript( this, this.GetType(), "sort", Jscript, true );
}
private DataTable GetDate()
{
DataTable dt = new DataTable();
dt.Columns.Add( new DataColumn( "SCN", typeof( int ) ) );
dt.Columns.Add( new DataColumn( "NAME", typeof( string ) ) );
dt.Columns.Add( new DataColumn( "TIME", typeof( DateTime ) ) );
dt.Columns.Add( new DataColumn( "REMARK", typeof( string ) ) );
for( int i = 1; i < 6; i++ )
{
DataRow newrow = dt.NewRow();
newrow[ "SCN" ] = i;
newrow[ "NAME" ] = GetName( i );
newrow[ "TIME" ] = DateTime.Today.AddMinutes( ( double ) i );
newrow[ "REMARK" ] = "測試 "+i.ToString()+" jquery tinysort";
dt.Rows.Add( newrow );
}
return dt;
}
private string GetName(int type)
{
string Name = string.Empty;
switch( type )
{
case 1:
Name= "魯夫";
break;
case 3:
Name ="索隆";
break;
case 5:
Name= "香吉士";
break;
default:
Name= "RiCo" + type.ToString();
break;
}
return Name;
}
由於GridView Render Html預設並不會加上<thead> and <tbody> elements，
這將導致tinysort找不到真正需排序的內容，只要利用GridView1.HeaderRow.TableSection屬性就可解決這小問題。
結果:
排序項次。
排序姓名。
排序時間。
參考