ASP.NET实现Gridview隐藏/显示列源码介绍: 这篇文章演示如果让用户有显示/隐藏他们需要的GridView的列的功能,这是非常有用的,因为在GridView的所有列并不是每个的用户都需要的.用户想根据自己的需求看到想要的列.而不是显示一个巨大的 gridview,霸占了整个屏幕,而是一个整洁的Gridview,而且它有所有你需要的列.对于页面的打印这也是一个非常有用的技术,因为用户可以灵活地选择GridView的列打印。背景: RowCreated 和ItemDataBound 事件允许你用多种方式注入HTML, CSS,和JavaScript 来增强GridView 控件的功能。 文章将会演示两种显示和隐藏GridView列的方法,一种是客户端的方法,另外一种是服务段的方法.在客户段显示和隐藏GridView的列大部分代码是在GridView的RowCreated事件生成客户端的功能的。当GridView的Header行被创建后,一个带负号的 HyperLink被插入每个Header行的单元格中用来隐藏列。 这个hyperlink通过它的onclick事件调用一个HideCol的Javascript方法,CSS类用来增加负号的大小,当每个数据行被创建的时候,一个Id将会被添加到每行中用来让Javascript区分每一行.代码 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { GridView gridView = (GridView)sender; StringBuilder sb = new StringBuilder();// For the header row add a link to each header // cell which can call the HideCol javascript method if (e.Row.RowType == DataControlRowType.Header) { // Loop through each cell of the row for (int columnIndex = 0; columnIndex < e.Row.Cells.Count; columnIndex++) { // Build the hide column link sb.Remove(0, sb.Length); // first empty the StringBuilder sb.Append("javascript:HideCol('"); sb.Append(gridView.ClientID); sb.Append("', "); sb.Append(columnIndex); sb.Append(", '"); sb.Append(columnNames[columnIndex]); sb.Append("');");// Build the "Hide Column" HyperLink control HyperLink hideLink = new HyperLink(); hideLink.Text = "-"; hideLink.CssClass = "gvHideColLink"; hideLink.NavigateUrl = sb.ToString(); hideLink.Attributes.Add("title", "Hide Column");// Add the "Hide Column" HyperLink to the header cell e.Row.Cells[columnIndex].Controls.AddAt(0, hideLink);// If there is column header text then // add it back to the header cell as a label if (e.Row.Cells[columnIndex].Text.Length > 0) { Label columnTextLabel = new Label(); columnTextLabel.Text = e.Row.Cells[columnIndex].Text; e.Row.Cells[columnIndex].Controls.Add(columnTextLabel); } } }// Give each row an id if (e.Row.RowType == DataControlRowType.Pager) e.Row.Attributes.Add("id", gridView.ClientID + "_pager"); else e.Row.Attributes.Add("id", gridView.ClientID + "_r" + e.Row.RowIndex.ToString()); }SetupShowHideColumns方法中生成“Show Columns”下拉菜单的HTML,输出在Literal控件上面 。代码 private void SetupShowHideColumns(GridView gridView, Literal showHideColumnsLiteral) { StringBuilder sb = new StringBuilder();sb.Append("<div class=\"showHideColumnsContainer\">"); sb.Append("<select id=\""); sb.Append(gridView.ClientID); sb.Append("_showCols\" onchange=\"javascript:ShowCol('"); sb.Append(gridView.ClientID); sb.Append("', this.value);\" style=\"display:none;\">"); sb.Append("<option>- Show Column -</option></select></div>");showHideColumnsLiteral.Text = sb.ToString(); }在数据绑定到GridView之后,其余的工作由ShowHideColumns.js中的javascript来完成.当列头的hyperlink被点击的时候后,它将会传递GridView的名字,列的索引和列名给HideCol方法,这个方法能找到这一列的每个单元格,每个单元格的将添加 display:none样式,用来隐藏这一列.当选择"Show Column"中的选项后,Javascript方法ShowCol将会被调用,它将移除每个单元格的display:none样式,这一列将会被再次显示.在服务端显示/隐藏GridView的列服务端的例子将通过RowCreated事件给每个列头添加一个负号,这次是使用LinkButton控件.设置CommandName和 CommandArgument属性,这样当通过LinkButton引发RowCommand事件时,相关的列都可以隐藏。以前隐藏的列索引存储在一个 List<int>中,这些列在建立时,将会被隐藏的。代码 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { // For the header row add a link button to each header // cell which can execute a row command if (e.Row.RowType == DataControlRowType.Header) { // Loop through each cell of the header row for (int columnIndex = 0; columnIndex < e.Row.Cells.Count; columnIndex++) { LinkButton hideLink = new LinkButton(); hideLink.CommandName = "hideCol"; hideLink.CommandArgument = columnIndex.ToString(); hideLink.Text = "-"; hideLink.CssClass = "gvHideColLink"; hideLink.Attributes.Add("title", "Hide Column");// Add the "Hide Column" LinkButton to the header cell e.Row.Cells[columnIndex].Controls.AddAt(0, hideLink);// If there is column header text then // add it back to the header cell as a label if (e.Row.Cells[columnIndex].Text.Length > 0) { Label columnTextLabel = new Label(); columnTextLabel.Text = e.Row.Cells[columnIndex].Text; e.Row.Cells[columnIndex].Controls.Add(columnTextLabel); } } }// Hide the column indexes which have been stored in hiddenColumnIndexes foreach(int columnIndex in hiddenColumnIndexes) if (columnIndex < e.Row.Cells.Count) e.Row.Cells[columnIndex].Visible = false; }在SetupShowHideColumns 方法中创建"Show Columns"下拉菜单,以前被隐藏的列名被添加到"Show Columns"下拉菜单选项中。代码 private void SetupShowHideColumns() { this.GridView1ShowHideColumns.Items.Clear();if (hiddenColumnIndexes.Count > 0) { this.GridView1ShowHideColumns.Visible = true; this.GridView1ShowHideColumns.Items.Add(new ListItem("-Show Column-", "-1"));foreach (int i in hiddenColumnIndexes) this.GridView1ShowHideColumns.Items.Add( new ListItem(columnNames[i], i.ToString())); } else { this.GridView1ShowHideColumns.Visible = false; } }示例项目的例子:客户端的例子: •C#.NET - Client-side example accessing data stored in session. •C#.NET - Client-side example which includes: MasterPage, UpdatePanel, GridView editing, paging and sorting, accessing data via the SqlDataSource 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: MasterPage, UpdatePanel, GridView editing, paging and sorting, accessing data via the SqlDataSource control. •VB.NET - Server-side example accessing data stored in session.结论: 如果你想让你的用户能够显示和隐藏在ASP.NET GridView的列,那么这种技术可能是非常有用的。原文:http://www.codeproject.com/KB/webforms/ShowHideGridviewColumns.aspx作者:朱祁林 出处:http://zhuqil.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
这篇文章演示如果让用户有显示/隐藏他们需要的GridView的列的功能,这是非常有用的,因为在GridView的所有列并不是每个的用户都需要的.用户想根据自己的需求看到想要的列.而不是显示一个巨大的 gridview,霸占了整个屏幕,而是一个整洁的Gridview,而且它有所有你需要的列.对于页面的打印这也是一个非常有用的技术,因为用户可以灵活地选择GridView的列打印。背景:
RowCreated 和ItemDataBound 事件允许你用多种方式注入HTML, CSS,和JavaScript 来增强GridView 控件的功能。
文章将会演示两种显示和隐藏GridView列的方法,一种是客户端的方法,另外一种是服务段的方法.在客户段显示和隐藏GridView的列大部分代码是在GridView的RowCreated事件生成客户端的功能的。当GridView的Header行被创建后,一个带负号的 HyperLink被插入每个Header行的单元格中用来隐藏列。 这个hyperlink通过它的onclick事件调用一个HideCol的Javascript方法,CSS类用来增加负号的大小,当每个数据行被创建的时候,一个Id将会被添加到每行中用来让Javascript区分每一行.代码
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
GridView gridView = (GridView)sender;
StringBuilder sb = new StringBuilder();// For the header row add a link to each header
// cell which can call the HideCol javascript method
if (e.Row.RowType == DataControlRowType.Header)
{
// Loop through each cell of the row
for (int columnIndex = 0; columnIndex < e.Row.Cells.Count; columnIndex++)
{
// Build the hide column link
sb.Remove(0, sb.Length); // first empty the StringBuilder
sb.Append("javascript:HideCol('");
sb.Append(gridView.ClientID);
sb.Append("', ");
sb.Append(columnIndex);
sb.Append(", '");
sb.Append(columnNames[columnIndex]);
sb.Append("');");// Build the "Hide Column" HyperLink control
HyperLink hideLink = new HyperLink();
hideLink.Text = "-";
hideLink.CssClass = "gvHideColLink";
hideLink.NavigateUrl = sb.ToString();
hideLink.Attributes.Add("title", "Hide Column");// Add the "Hide Column" HyperLink to the header cell
e.Row.Cells[columnIndex].Controls.AddAt(0, hideLink);// If there is column header text then
// add it back to the header cell as a label
if (e.Row.Cells[columnIndex].Text.Length > 0)
{
Label columnTextLabel = new Label();
columnTextLabel.Text = e.Row.Cells[columnIndex].Text;
e.Row.Cells[columnIndex].Controls.Add(columnTextLabel);
}
}
}// Give each row an id
if (e.Row.RowType == DataControlRowType.Pager)
e.Row.Attributes.Add("id", gridView.ClientID + "_pager");
else
e.Row.Attributes.Add("id", gridView.ClientID + "_r" + e.Row.RowIndex.ToString());
}SetupShowHideColumns方法中生成“Show Columns”下拉菜单的HTML,输出在Literal控件上面 。代码
private void SetupShowHideColumns(GridView gridView, Literal showHideColumnsLiteral)
{
StringBuilder sb = new StringBuilder();sb.Append("<div class=\"showHideColumnsContainer\">");
sb.Append("<select id=\"");
sb.Append(gridView.ClientID);
sb.Append("_showCols\" onchange=\"javascript:ShowCol('");
sb.Append(gridView.ClientID);
sb.Append("', this.value);\" style=\"display:none;\">");
sb.Append("<option>- Show Column -</option></select></div>");showHideColumnsLiteral.Text = sb.ToString();
}在数据绑定到GridView之后,其余的工作由ShowHideColumns.js中的javascript来完成.当列头的hyperlink被点击的时候后,它将会传递GridView的名字,列的索引和列名给HideCol方法,这个方法能找到这一列的每个单元格,每个单元格的将添加 display:none样式,用来隐藏这一列.当选择"Show Column"中的选项后,Javascript方法ShowCol将会被调用,它将移除每个单元格的display:none样式,这一列将会被再次显示.在服务端显示/隐藏GridView的列服务端的例子将通过RowCreated事件给每个列头添加一个负号,这次是使用LinkButton控件.设置CommandName和 CommandArgument属性,这样当通过LinkButton引发RowCommand事件时,相关的列都可以隐藏。以前隐藏的列索引存储在一个 List<int>中,这些列在建立时,将会被隐藏的。代码
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
// For the header row add a link button to each header
// cell which can execute a row command
if (e.Row.RowType == DataControlRowType.Header)
{
// Loop through each cell of the header row
for (int columnIndex = 0; columnIndex < e.Row.Cells.Count; columnIndex++)
{
LinkButton hideLink = new LinkButton();
hideLink.CommandName = "hideCol";
hideLink.CommandArgument = columnIndex.ToString();
hideLink.Text = "-";
hideLink.CssClass = "gvHideColLink";
hideLink.Attributes.Add("title", "Hide Column");// Add the "Hide Column" LinkButton to the header cell
e.Row.Cells[columnIndex].Controls.AddAt(0, hideLink);// If there is column header text then
// add it back to the header cell as a label
if (e.Row.Cells[columnIndex].Text.Length > 0)
{
Label columnTextLabel = new Label();
columnTextLabel.Text = e.Row.Cells[columnIndex].Text;
e.Row.Cells[columnIndex].Controls.Add(columnTextLabel);
}
}
}// Hide the column indexes which have been stored in hiddenColumnIndexes
foreach(int columnIndex in hiddenColumnIndexes)
if (columnIndex < e.Row.Cells.Count)
e.Row.Cells[columnIndex].Visible = false;
}在SetupShowHideColumns 方法中创建"Show Columns"下拉菜单,以前被隐藏的列名被添加到"Show Columns"下拉菜单选项中。代码
private void SetupShowHideColumns()
{
this.GridView1ShowHideColumns.Items.Clear();if (hiddenColumnIndexes.Count > 0)
{
this.GridView1ShowHideColumns.Visible = true;
this.GridView1ShowHideColumns.Items.Add(new ListItem("-Show Column-", "-1"));foreach (int i in hiddenColumnIndexes)
this.GridView1ShowHideColumns.Items.Add(
new ListItem(columnNames[i], i.ToString()));
}
else
{
this.GridView1ShowHideColumns.Visible = false;
}
}示例项目的例子:客户端的例子:
•C#.NET - Client-side example accessing data stored in session.
•C#.NET - Client-side example which includes: MasterPage, UpdatePanel, GridView editing, paging and sorting, accessing data via the SqlDataSource 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: MasterPage, UpdatePanel, GridView editing, paging and sorting, accessing data via the SqlDataSource control.
•VB.NET - Server-side example accessing data stored in session.结论:
如果你想让你的用户能够显示和隐藏在ASP.NET GridView的列,那么这种技术可能是非常有用的。原文:http://www.codeproject.com/KB/webforms/ShowHideGridviewColumns.aspx作者:朱祁林
出处:http://zhuqil.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。