[C#][ASP.NET]利用tinysort plugins排序GridView

  • 4844
  • 0
  • C#
  • 2010-11-17

[C#][ASP.NET]利用tinysort plugins排序GridView

排序功能我想是每個使用者所需要的,雖然GridView已內建排序功能,

但個人比較喜歡在client直接做掉,這裡我將套用TinySort來完成這小需求。

 

.aspx

image

引用相關js,

 

image

將需要排序的欄位轉換成樣板,並在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屬性就可解決這小問題。

 

結果:

image

 

image

排序項次。

 

image

排序姓名。

 

image

排序時間。

 

 

參考

GridView.HeaderRow 屬性

TableRow.TableSection 屬性