天天看點

在asp.net中顯示/隐藏GridView的列

介紹:

      這篇文章示範如果讓使用者有顯示/隐藏他們需要的GridView的列的功能,這是非常有用的,因為在GridView的所有列并不是每個的使用者都需要的.使用者想根據自己的需求看到想要的列.而不是顯示一個巨大的gridview,霸占了整個螢幕,而是一個整潔的Gridview,而且它有所有你需要的列.對于頁面的列印這也是一個非常有用的技術,因為使用者可以靈活地選擇GridView的列列印。

背景:

    RowCreated 和ItemDataBound 事件允許你用多種方式注入HTML, CSS,和JavaScript 來增強GridView 控件的功能。

應用程式示例:

     這是一個任務管理系統的示例,它可能就沒有必要總是顯示任務“ID”列,還有列印任務清單的時候,可能不需要"Assigned To" 列.

     下面是一個示範的Gridview,它隻顯示了4列.

通過點選列頭的負号,使用者能隐藏一列;下圖中,“Id”列被隐藏了.

隐藏列可再次可見通過選擇 "Show Column"下拉菜單讓其顯示.當一列剛被隐藏後,它将出現在 "Show Column"中的第一個位置。

下面是在一頁列印預覽,ID為隐藏的列:

這篇文章将會示範兩種顯示和隐藏GridView列的方法,一種是用戶端的方法,另外一種是服務段的方法.

 在客戶段顯示和隐藏GridView的列

大部分代碼是在GridView的RowCreated事件生成用戶端的功能的。當GridView的Header行被建立後,一個帶負号的HyperLink被插入每個Header行的單元格中用來隐藏列。 這個hyperlink通過它的onclick事件調用一個HideCol的Javascript方法,CSS類用來增加負号的大小,當每個資料行被建立的時候,一個Id将會被添加到每行中用來讓Javascript區分每一行.

代碼

SetupShowHideColumns方法中生成“Show Columns”下拉菜單的HTML,輸出在Literal控件上面 。

    在資料綁定到GridView之後,其餘的工作由ShowHideColumns.js中的javascript來完成.當列頭的hyperlink被點選的時候後,它将會傳遞GridView的名字,列的索引和列名給HideCol方法,這個方法能找到這一列的每個單元格,每個單元格的将添加<code>display:none樣式,用來隐藏這一列.</code>

<code>   當選擇"Show Column"中的選項後,Javascript方法ShowCol将會被調用,它将移除每個單元格的display:none樣式,這一列将會被再次顯示.</code>

<code>在服務端顯示/隐藏GridView的列</code>

<code>服務端的例子将通過RowCreated事件給每個列頭添加一個負号,這次是使用LinkButton控件.設定CommandName和CommandArgument屬性,這樣當通過LinkButton引發RowCommand事件時,相關的列都可以隐藏。以前隐藏的列索引存儲在一個List&lt;int&gt;中,這些列在建立時,将會被隐藏的。</code>

<code> </code>

在SetupShowHideColumns 方法中建立"Show Columns"下拉菜單,以前被隐藏的列名被添加到"Show Columns"下拉菜單選項中。

示例項目的例子:

 用戶端的例子:

C#.NET - Client-side example accessing data stored in session.

C#.NET - Client-side example which includes: <code>MasterPage</code>, <code>UpdatePanel</code>, <code>GridView</code> editing, paging and sorting, accessing data via the <code>SqlDataSource</code> control.

VB.NET - Client-side example accessing data stored in session.

 服務端的例子

C#.NET - Server-side example accessing data stored in session.

C#.NET - Server-side example which includes: <code>MasterPage</code>, <code>UpdatePanel</code>, <code>GridView</code> editing, paging and sorting, accessing data via the <code>SqlDataSource</code> control.

VB.NET - Server-side example accessing data stored in session.

結論:

 如果你想讓你的使用者能夠顯示和隐藏在ASP.NET GridView的列,那麼這種技術可能是非常有用的。

本文轉自麒麟部落格園部落格,原文連結:http://www.cnblogs.com/zhuqil/archive/2009/12/14/1623652.html,如需轉載請自行聯系原作者

繼續閱讀