栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > C/C++/C#

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

C/C++/C# 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

介绍:

      这篇文章演示如果让用户有显示/隐藏他们需要的GridView的列的功能,这是非常有用的,因为在GridView的所有列并不是每个的用户都需要的.用户想根据自己的需求看到想要的列.而不是显示一个巨大的gridview,霸占了整个屏幕,而是一个整洁的Gridview,而且它有所有你需要的列.对于页面的打印这也是一个非常有用的技术,因为用户可以灵活地选择GridView的列打印。

背景:

GridView 控件的功能。

应用程序示例:

     这是一个任务管理系统的示例,它可能就没有必要总是显示任务“ID”列,还有打印任务列表的时候,可能不需要"Assigned To" 列.

     下面是一个演示的Gridview,它只显示了4列.

 

通过点击列头的负号,用户能隐藏一列;下图中,“Id”列被隐藏了.

隐藏列可再次可见通过选择 "Show Column"下拉菜单让其显示.当一列刚被隐藏后,它将出现在 "Show Column"中的第一个位置。

下面是在一页打印预览,ID为隐藏的列:

这篇文章将会演示两种显示和隐藏GridView列的方法,一种是客户端的方法,另外一种是服务段的方法.

 在客户段显示和隐藏GridView的列

大部分代码是在GridView的RowCreated事件生成客户端的功能的。当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(""showHideColumnsContainer">");
    sb.Append("    sb.Append(gridView.ClientID);
    sb.Append("_showCols" onchange="javascript:ShowCol('");
    sb.Append(gridView.ClientID);
    sb.Append("', this.value);" style="display:none;">");
    sb.Append("");

    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中,这些列在建立时,将会被隐藏的。

 

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的列,那么这种技术可能是非常有用的。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/231113.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号